trouble with "row" going into next section

Question

I am having trouble with this... So where my problem lies is my first section that is underneath my navbar is also including the navbar in that section. My navbar is a bootstrap .navbar-default. I have made a custom style sheet to override some of the bootstrap styles. In that custom style sheet, I overrided some of the .navbar-default styles with my own.

.navbar-default {
    background-color: #131a33;
    min-height: 90px;
    border-radius: 5px;
    position: fixed;
    width: 100%;
    z-index: 1; 
} 

When I created this style in my custom style sheets, everything went well, but this is what caused the section below my screen to include the navbar in it. Now my row goes all the way up INTO (not up to) the navbar in that section, but there is a gap left at the bottom of the section. Now where the problem lies is that when I go to mobile size, the row in that section pushes down into my next section. I know this is all very confusing. Now here is where it gets confusing even more. I want the section to include the navbar like it is doing right now, because in that section, the background image goes behind the navbar, and I want to keep it that way. Here is my navbar and first section code.

<nav class="navbar-default top-of-page">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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='/CMS_Static/Uploads/313864614C6F6F/fv-logo-3.gif' align="left"/></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul id="navLinks" class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Locations</a></li>
        <li><a href="#">Prices</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<section class="topInfo">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-offset-2">
                <h1 class="topInfoText text-center">Aerial Photography In South Florida</h1>
            </div>
            <div class="col-sm-4 col-sm-offset-4">
                 <a class="btn bannerBtn btn-block" href="/videography">View More</a>
            </div>
        </div>
    </div>
</section>

Answer 1

I am not sure if I understood your issue correctly. Please look at the codepen here.It looks fine even on the mobile devices. Now you can tell me if you are looking for this or your expectation is something else. I will try to help you.

.navbar-default {
    background-color: #131a33;
    min-height: 90px;
    border-radius: 5px;
    
    width: 100%;
    z-index: 1; 
} 

<nav class="navbar-default top-of-page">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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='/CMS_Static/Uploads/313864614C6F6F/fv-logo-3.gif' align="left"/></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul id="navLinks" class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Locations</a></li>
        <li><a href="#">Prices</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<section class="topInfo">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-offset-2">
                <h1 class="topInfoText text-center">Aerial Photography In South Florida</h1>
            </div>
            <div class="col-sm-4 col-sm-offset-4">
                 <a class="btn bannerBtn btn-block" href="/videography">View More</a>
            </div>
        </div>
    </div>
</section>
<section class="topInfo">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-offset-2">
                <h1 class="topInfoText text-center">Aerial Photography In South Florida</h1>
            </div>
            <div class="col-sm-4 col-sm-offset-4">
                 <a class="btn bannerBtn btn-block" href="/videography">View More</a>
            </div>
        </div>
    </div>
</section>

Codepen working copy