Question

I’m confused at a basic problem, and I’m not sure how to go about this —

Take a look at http://www.hncharity.com

If you look at the content div, it’s slightly off center (It becomes more pronounced as you go into mobile view).

The div is structured like so:

<div class="container">
  <div class="span10 offset1">
    <div class="content">
         ....
    </div>
  </div>
</div>

The .content class has a white background, adds padding, and a margin all around the span10 offset1 div, to make the width appear smaller.

This is the css for content

  margin:40px;
  padding:40px;
  position:relative;
  margin-top:-200px;
  z-index:1201;
  background-color:white;

As you can see, the content does not appear to be centered. What would I do to fix this?

Answer 1

you missed to add a container with class row before span and after container.

Correct way:

<div class="container">
  <div class="row">
    <div class="span10 offset1">
      <div class="content">
         ....
      </div>
    </div>
  </div>
</div>