Logo and Facebook link icons are not properly aligned when using bootstrap

Question

I am using twitter bootstrap to design a website firstly i am designing the logo and header but the logo is not align to the left when i give margin-left:-200px it aligns to the left but when i reduce the screen size, then the logo is not visible at the centre of the screen. Please suggest some solutions.

 <div id="container">
      <div id="header">
        <div class="row">
        <div class="col-md-4">
          <div class="logo"><img src="images/header/logo.gif" /></div>
          </div>
           <div class="col-md-12">
          <div class="right_div">
            <div id="social">
              <ul>
                <li><img src="images/links/call.png"/></li>
                <li><img src="images/links/mail.png"/></li>
                <li><img src="images/links/Linkedin_icon.jpg"/></li>
                <li><img src="images/links/p.jpg"/></li>
                <li><img src="images/links/twitter.jpg"/></li>
                <li><img src="images/links/facebook-icon.png"/></li>
              </ul>
            </div>
          </div>
        </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    </div>
    </div>
    </div>

Answer 1

Change your HTML as this ( .row should have perfect 12 grids ie all col-* should add upto 12 to hav perfect alignment, here I gave 4 grids to logo and 8 grids to list )

Also bootstrap has class="container" and not id="container" so add class="container" for .row to act properly.

For display inline of ul li elements just add display: inline to li styles and list-style: "none" for avoiding default list style of ul

Demo

HTML

<div id="container" class="container">
    <div id="header">
        <div class="row">
            <div class="col-md-4 bordr">
                <div class="logo">
                    <img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
                </div>
            </div>
            <div class="col-md-8 bordr">
                <div class="right_div">
                    <div id="social">
                        <ul>
                            <li>
                                <img src="http://www.ahmadtea.com/media/socialicons/fb.png" />
                            </li>
                            <li>
                                <img src="http://www.ahmadtea.com/media/socialicons/fb.png" />
                            </li>
                            <li>
                                <img src="http://www.ahmadtea.com/media/socialicons/fb.png" />
                            </li>
                            <li>
                                <img src="http://www.ahmadtea.com/media/socialicons/fb.png" />
                            </li>
                            <li>
                                <img src="http://www.ahmadtea.com/media/socialicons/fb.png" />
                            </li>
                            <li>
                                <img src="http://www.ahmadtea.com/media/socialicons/fb.png" />
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS /* borders for understanding only */

li {
    display:inline;
}
ul {
    list-style:none;
}
.bordr {
    border:1px solid black;
}

.logo, #social {
    text-align:center;
}