Help centering custom widget area at responsive break points

[jorwesflow]

I've created a custom widget for contact/social info with the ID "#top-bar". I want to be able to center it at the first responsive break point, which I've sort of managed to do by adding width: 100% at 1023px break point.
At the second break point (767px), I want to hide the email address text leaving only the icon, which I've also managed to do by adding a class="email-text" to that link and adding display: none But the problem is, the whole thing isn't centered as you scale the width of the page down to test mobile responsiveness. It's probably some basic CSS, but then again, I'm a basic developer...

Can anyone Firebug the pants off this and give me some ideas?

http://www.openroaddetailing.com/draft/

[bandj]

try adding a wrap to that div and then adjusting the wrap css.
or
get rid of the float, margin and text-align and adjust your padding for each break for example 10px 0 10px 100px

very nice looking btw.

[jorwesflow]

Thanks! I'm honing my skills as a beginner developer... So how do I add a wrap to that div? It's already within the main wrap.

[Author]

Posts