Horizontally center Bootstrap3 row-fluid container with many nested elements

Question

I've been trying to horizontally center the .row-fluid container with many other nested elements, but couldn't find the right way to do that.

Basically, it's the user account page with 4 tabs.

Here's how it looks like now: codepen.io full page view

Also, I need to center the nav tabs, I tried to apply text-center to them, but they didn't move.

And for some reason, when I change the nav tab from the first to any other, the whole container moves a little, changes its left margin, is it because of the table inside the first tab?

Here's the workspace link where I typed the code.

Could you please help me to horizontally center the whole container and position the navigation tabs in the center of their blue container (ul element)?

Answer 1

.row-fluid container appears to be centered. The elements within however are not. You need to change:

  <div class="col-sm-4 col-md-4 user-details">

to this:

  <div class="col-sm-4 col-md-4 col-md-offset-4 user-details">

Update: To center the nav links.

CSS:

.user-info-block .navigation {
  width: 100%;
  margin:0;
  padding: 18px 0;
  list-style: none;
  border-bottom: 1px solid #428BCA;
  border-top: 1px solid #428BCA;
  text-align: center;
}

.navigation li {
  display:inline;
}

.navigation li a {
  padding: 20px 30px;
}