Bootstrap 3 navbar alignment

Question

I'm using bootstrap 3 to build a WordPress theme. I've got a header, main content, right sidebar and footer (so it's pretty simple, I guess).

I'm having the following problem. I'm trying to align the "navbar-brand" to it starts on the same point with my content. The following image explains it better. I want "The website" to start where my white background (post content) starts.

Any idea on how to achieve this? I'd like this to start from that point on each supported screen-size.

Thanks.

Here's the code:

        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a href="#" class="navbar-brand">TheWebsite</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">NEWS</a></li>
                <li><a href="#">INSPIRATION</a></li>
                <li><a href="#">RESOURCES</a></li>
                <li><a href="#">DESIGN</a></li>
                <li><a href="#">CODE</a></li>
                <li><a href="#">FREE STUFF</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">OTHER <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
                <form class="navbar-form" role="search">
                    <div class="form-group">
                       <input type="text" class="form-control" placeholder="Just type and hit return to search...">
                    </div>
                </form>                 
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>

Answer 1

Looks like you don't have a container div inside your navbar. Just Wrap the insides of navbar to a .container div and that should do it.

Like:

<div role="navigation" class="navbar">
  <div class="container">
    <!-- .navbar content -->
  </div>
</div>

Answer 2

Without seeing your code it's impossible to know what you've done, but it looks like you're missing a container from your Navbar code. I suggest taking a look at the documentation here:

http://getbootstrap.com/components/#navbar

And also, you can view the source of this page here:

http://getbootstrap.com/examples/theme/

It will show you that the second element in the Navbar HTML needs to have a container class applied to it to get the Navbar items to align properly.