Css div margin and center

Question

I want to center everything on my code but I tried a few things and it's stills remains on the left side, so I know that is coming from float:left

About cizgi style when I don't put float:left they looks overlap instead being separated.

cizgi color must be white but I made it black for showing it easier.

It must looks like this:

My Code:

 .cizgi { min-height: 10px; background-color: #000000; width: 600px; margin: 0px auto; float: left; } .social { width: 600px; margin: 0px auto; float: left; } .twitter { background: url('http://i.imgur.com/Tdon7vV.png') no-repeat 0 -2px; width: 43px; height: 43px; float: left; } .facebook { background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -55px -2px; width: 43px; height: 44px; float: left; } .instagram { background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -105px 0; width: 46px; height: 45px; float: left; } .pinter { background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -160px 0; width: 43px; height: 44px; float: left; } .posta { background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -212px -1px; width: 43px; height: 43px; float: left; } 

 <div class="cizgi"></div> <div class="social"> <div class="twitter"></div> <div class="facebook"></div> <div class="instagram"></div> <div class="pinter"></div> <div class="posta"></div> </div> <div class="cizgi"></div> 

Answer 1

To center:

• Remove float:left from .social and reduce the width from 600px to its maximum width that will have : 220px

To have the background with those borders:

• Add a parent class (I named bg ) give it background color and padding
• change your social items from float:left to display:inline-block
• add margin top/bottom to your .cizgi

 .bg { background: lightgray; padding: 5px 0 } .cizgi { min-height: 10px; background-color: white; width: 600px; margin: 5px auto; } .social { width: 220px; margin: 0 auto; font-size: 0 } .social > div { display: inline-block } .twitter { background: url('http://i.imgur.com/Tdon7vV.png') no-repeat 0 -2px; width: 43px; height: 43px; } .facebook { background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -55px -2px; width: 43px; height: 44px; } .instagram { background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -105px 0; width: 46px; height: 45px; } .pinter { background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -160px 0; width: 43px; height: 44px; } .posta { background: url('http://i.imgur.com/Tdon7vV.png') no-repeat -212px -1px; width: 43px; height: 43px; } 

 <div class="bg"> <div class="cizgi"></div> <div class="social"> <div class="twitter"></div> <div class="facebook"></div> <div class="instagram"></div> <div class="pinter"></div> <div class="posta"></div> </div> <div class="cizgi"></div> </div>