Question

I’m helping a client upgrade his site design, and built the site below using bootstrap as a framework. Something is really nagging at me though — the container doesn’t seem centered to me. The cause is probably because of defined a background color the container, and there’s no margin on the right side. I want to keep the “full-width” of things, and have no padding on the right side, but I’m not sure how to achieve that and have the container centered. The only ideas coming to me are riddled with way too much code.

What’s the most efficient method you would employ to fix this issue?

http://www.dredwardliu.com/mobile

Answer 1

Just taking a quick look, I noticed you have a row that contains divs .body, .span4, and .span12. You need to put the .body and .span4 in a row, span12 in its own row, and perhaps also give .span8 to .body.

You’re actually missing a lot of rows in that .content div.

This Is what you have now:

 <div class="row">
    <div class="content">
      <div class="body">                      <-- should have a row start here
        (For Your Smile...)
        </div><!--body text-->
      </div><!--span8-->                      <-- missing div.span8

      <div class="span4">
        (meet Liu)
      </div><!--end map-->                   
                                              <-- should end row, begin a new row
      <div class="span12">
        (etc)
      </div><!--span12-->                     <-- end another row, begin another, etc.