Inappropriate use of markup

You're using paragraphs when you should be using heading tags (h1-h6) to markup your headlines (you also have a spelling error).

<p class="section-subheader">We'r Really Into Birds</p>

Should be:

<h1 class="section-subheader">We're Really Into Birds</h1>

You have some invalid markup, which can cause unexpected things to happen. You're not allowed to place paragraphs inside other paragraphs:

<p class="section-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p></p>

Should be:

<div class="section-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p></div>

However, if all of your paragraphs have the same styles, the paragraph itself should be styled rather than apply classes to each and every one:

p {
    /* styles from the section-content class */
}

Creating empty markup for styling purposes is dirty and probably one of the worst things that Twitter's Bootstrap encourages (classitis being the other). There are cleaner ways of creating this type of element:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsed">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

Should be something more like this:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsed">
  <span class="sr-only">Toggle navigation</span>
</button>

And

.navbar-toggle:before {
    /* styles to make it look like the ubiquitous hamburger icon */
}

The second-container-helper class

You have a few things going on wrong here (whether its the implementation or the design, I can't tell because you haven't shown us the mock-up you're working from). Either way, you don't need that extra element.

You have a page that looks like this:

In my opinion, it would be more aesthetically appealing if it looked like this:

or this:

However, all of them can be done with markup as simple as this by fiddling with the margins:

<ul>
  <li><p>A</p></li><!--
  --><li><p>B</p></li>
</ul>

• #1 http://codepen.io/cimmanon/pen/KxDbL
• #2 http://codepen.io/cimmanon/pen/jtEGf (needs a bit of tweaking on the margins)
• #3 http://codepen.io/cimmanon/pen/oryHJ

There are a couple of potential "gotchas" in your markup. These things will come back to haunt you (or someone else in the future) when you need to maintain and update the site.

Let me explain a little about the Bootstrap grid so that you'll understand why I'm recommending the changes that I am. The grid works with 3 parts: a container, a row and column(s). You already know that, but take a closer look at how and why it works like that:

The container, both in the .container and .container-fluid, has 15px of padding. The row negates the container padding with -15px of margin. Columns have 15px of padding, which pull the content away from the edges of the container and create a consistent 30px gutter.

The purpose for adding 15px of padding that is only negated by the negative row margins seems silly, but it is essential to allow for nesting columns inside of other columns! Note in the diagram below how the nested columns indicated by the red outline fits neatly into the enclosing column without getting additional padding applied.

For this reason, in my mind, it makes more sense to add the additional padding to the body. Then both the container, and container-fluid class work as normal. Also, you can eliminate all of the extra unnecessary container-fluid divs on the page, only one is needed. This will make it a whole a lot easier later if someone else with Bootstrap knowledge needs to work on your site and it will keep the markup to a minimum.

The next thing you can do to streamline your markup is remove all of the col-sm-12 classes from all of the places where you have both col-xs-12 and col-sm-12. This is unnecessary. Think of col-*-* classes as additive. If you want your design to behave the same from one breakpoint to the next you don't need to add a col class for that breakpoint.

While you're at it, you can remove some of the extra rows. The only purpose for the row is to break up the content where you need to ensure that the floats are cleared. So, in this case, you can use one row for your main content and just add the row class to your footer tag.

In keeping with the some of the key recommendations as the previous post, you should also remove the invalid markup, use the proper semantic tags for headings and style the html selectors instead of adding unneeded classes.

So now we're down to what to do about those images. Two things need to happen: 1. At all breakpoints images need to expand beyond the padding and touch the edges of the screen; and 2. If the images are set into columns that don't span the full width of the screen, the far left and far right images need to retain their inside gutter. To accomplish this you can wrap the images in a containing element and give it some negative margin, just like how rows work. In keeping with the mobile first approach, I created three classes: .col-img-full, .col-img-left, .col-img-right, all with margin: 0 -35px; applied. Then I added a media query, to remove the inside margin for just the right and left images with two rules where the left image gets margin-right: 0 and the right image gets margin-left: 0.

This makes your design much more flexible! In the event your client/boss/whatever, wants to make a small change and add a third column to the design. No problem and no extra markup or css is needed, just drop your column in the middle with your image and everything still lines up nicely.

Okay, finally, let's deal with the navigation. The container-fluid in the middle of your nav was making a mess of things. This is partly why you were getting the scrollbar at the bottom of the screen. Plus, the extra markup was potentially limiting your ability take advantage of some of the core Bootstrap nav features, such as adding navbar-right or navbar-left classes if you want to change up how the elements float. So, I brought everything back to basics and just styled the markup to match how your existing design looked on my screen. I didn't really understand what you meant by "centering the menu" because I see your codepen with the uncollapsed navigation floating left.

I made two additional small adjustments to your css for the nav: 1. On my screen the arrows after the links were unaligned. A better way than trying to tweak the padding for those elements from the top and adjust for margins at different resolutions is just to position them absolutely from the bottom. 2. Also, I found that your navigation was breaking onto the next line at certain resolutions, so I added a media query to make sure it stayed put at all resolutions.

Here's the final markup:

<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img src="http://php.atservers.net/test/images/logo.png" alt="">
            </a>
        </div><!-- //.navbar-header -->
        <div class="collapse navbar-collapse" id="navbar-collapsed">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Bird Information</a></li>
                <li><a href="#">Contact</a></li>
            </ul><!-- //.navbar-nav -->
        </div> <!-- //.navbar-collapse -->
    </nav>
    <div class="container-fluid">
        <div class="col-img-full">
            <img src="http://php.atservers.net/test/images/bird-main.png" alt="Hi, I'm a Bird">
        </div><!-- //.column -->
        <main class="row" role="main">
            <div class="col-xs-12">
                <h1>Find Birds In Your Area</h1>
                <select name="" id="">
                    <option value="" selected>Select Your Region</option>
                    <option value="">CA</option>
                    <option value="">FL</option>
                    <option value="">WA</option>
                </select>
            </div><!-- //.column -->
            <div class="col-xs-12">
                <h2>We're Really Into Birds</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vitae, tenetur, ullam animi, expedita facere enim deleniti excepturi dolor reprehenderit cupiditate saepe quidem voluptatem blanditiis ea dolore facilis totam fugit.</p>
            </div><!-- //.column -->
            <div class="col-sm-6 section">
                <div class="col-img-left">
                    <img src="http://php.atservers.net/test/images/tree-birds.png">
                </div>   
                <h2>Even Birds in Trees</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam excepturi voluptates harum fugit enim non, id porro repellendus soluta cupiditate consequuntur dignissimos dolorem sint corporis, illo aliquam blanditiis hic nam.</p>
                <a href="#" class="section-link"><i class="fa fa-caret-right"></i>Learn more about trees (and birds)</a>
            </div> <!-- //.column .section-->
            <div class="col-sm-6 section">
                <div class="col-img-right">
                    <img src="http://php.atservers.net/test/images/all-birds.png">
                </div>   
                <h2>All Kinds of Birds</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est tenetur, reprehenderit at odio sit cumque neque placeat impedit praesentium soluta dolorum architecto qui molestias facilis voluptatibus, ut unde. Tenetur, provident.</p>
                <a href="#" class="section-link"><i class="fa fa-caret-right"></i>Learn more about trees (and birds)</a>
            </div> <!-- //.column .section -->
        </main><!-- //.row -->
        <footer class="row">
            <div class="col-xs-12">
                <div class="footer-credits">
                    <p class="text-muted">® Registered trademark of An Amazing Company Name, an affiliate of independent Canadian birds</p>
                    <p class="text-muted">© Copyright 2014 An Amazing Company Name</p>
                </div> <!-- //.footer-credits -->
                <ul class="footer-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Terms of Use</a></li>
                </ul>
            </div><!-- //.column -->
        </footer> <!-- //.row -->
    </div> <!-- //.container-fluid -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://php.atservers.net/test/js/bootstrap.min.js"></script>
</body>

and here are the final styles (based on your custom bootstrap css file):

body {
    padding: 0 20px;    
}
a, h1, h2, h3, h4, h5, h6 {
    color: #ff6600;
}
h1 {
    font-size: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
}
h2 {
    font-weight: normal;
    font-size: 28px;
    padding-top: 36px;
    padding-bottom: 16px;
}
img {
    height: auto;
    width: 100%;
    display: block;
}
select {
    width: 100%;
    padding: 0 10px;
    background-color: #ffffff;
    height: 60px;
    font-size: 24px;
    color: #c7c7cc;
    border: 2px solid #c7c7cc;
    border-radius: 4px;
    -webkit-appearance: none;
    background: url('../images/dropdown-arrow.png') no-repeat right;
    background-position: 98%;
}
.section p {
    color: #999999;
    font-size: 18px;
}
a .fa-caret-right {
  padding-right: 10px;
}
.col-img-full, .col-img-left, .col-img-right {
    margin: 0 -35px;
}
/* Navbar Styles */
.navbar{
  min-height: 158px;
  background-color: #ffffff;
  margin-bottom: 0;
  border: none;
}
.navbar-default{
  border: none;
}
.navbar-brand {
  margin-top: 36px;
}
.navbar-default .navbar-toggle{
  margin-top: 58px;
}
.navbar-default .navbar-collapse{
  border-color: transparent;
}
.navbar-collapse.in, .collapsing{
  margin-top: 65px;
}
/* Navbar Colors and Fonts */
.navbar-nav{
  background-color: #ff6600;
  padding: 0 30px;
  margin-left: 20px;
}
.navbar-default .navbar-nav > li > a{
  color: #fff;
  border-top: 1px solid #fff;
  margin-top: 50px;
}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{
  background-color: transparent;
  color: #fff;
  border-top: none;
  margin-top: 51px; 
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
  color: #fff;
}
/* //Navbar Colors and Fonts */
.nav li:before{
    position: absolute;
    font-family: 'Glyphicons Halflings';
    content: "\e080";
    right: 0;
    color: #fff;
     bottom: 15px;
}
/* //Navbar Styles */
/* Nav Media Queries Helpers */
/* removes the margins so the navigation menu stays inline with brand before collapsing */
@media (min-width: 848px) and (max-width: 955px) { 
  .navbar-nav {
    margin: 0 -40px 0 0;
  }
}
/* Logo img resizes below 482px */

@media screen and (max-width: 482px){
  .navbar-brand{
    width: 70%;
    margin-top: 40px;
    height: auto;
  }
}
/* //Logo img resizes below 482px */
/* //Nav Media Queries Helpers */
/* Image Media Queries Helpers */
/* Remove margin on one side for images in left or right columns that extend beyond body padding */
@media screen and (min-width: 767px){
    .col-img-left {
        margin-right: 0;
    }

    .col-img-right {
        margin-left: 0;
    }
}
/* //Image Media Queries Helpers */
/* Footer Styles*/
footer{
  margin-top: 80px;
}
.footer-credits{
  border-top: 1px solid #c7c7cc;
}
.footer-nav{
  list-style: none;
  padding-left: 0;
}
.footer-nav li{
  float: left;
  padding: 5px;
}
.footer-nav li a{
  border-right: 1px solid #c7c7cc;
  padding-right: 10px;
}
.footer-nav li:last-child a{
  border-right: none;
}
/* Footer Styles */

All of these recommendations will result in much cleaner, easier-to-maintain, and more semantic markup. I hope you find some or all of them to be helpful! Much luck to you.