Twitter Bootstrap content in container not centered

Question

I'm using Twitter Bootstrap for a site. I'm trying to get the content centered. Traditionally I would simple create a custom .container class that looks like this:

.container {
  width: 70%;
  max-width: 1024px;
  margin: 0 auto;
}

I've tried to override this class manually, but only the width seems to make a difference. I place the content inside the container like this:

<div class="container>
  <div ng-view></div>
</div>    

The container itself is centered. But the content inside seems to have a left margin/padding. Any ideas on how I should structure my divs?

Update I use Bootstrap v3.0.3

Answer 1

I'd stick with the scaffolding here if I were you, which keeps it responsive, clean & inline with the rest of the expected Bootstrap HTML. I'll demonstrate an Bootstrap 3.0.0 example below (As you haven't mentioned an version number)

<div class="container">
    <div class="row">
        <div ng-view class="col-xs-2"></div>
        <div ng-view class="col-xs-8 content">Centre</div>
        <div ng-view class="col-xs-2"></div>
    </div>
</div>

Bootply Demo