How do I get rid of extra white space between nav and next div?

How do I get rid of the white space after the nav bar in Dreamweaver CC?

The code (without all the nav links) is:

<div class="container-fluid" id="wrapper">

  <!-- Header --> 

    <header>

  <div class="row"><img src="images/header.jpg" class="center-block image-fill" alt="Kairos Prison Ministry"></div>

</header>

<!-- Navigation -->   

<nav class="navbar navbar-default dkblue col-lg-8 col-lg-offset-0">

    <!-- 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="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

</div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse dkblue" id="defaultNavbar1">

      <ul class="nav navbar-nav bg-primary">

        <li> </li>

        <li> </li>

        <li><a href="#" class="whitetext">Home</a></li><li><a href="#" class="whitetext">Home</a></li>

        <li class="dropdown"><a href="#" class="dropdown-toggle whitetext" data-toggle="dropdown" role="button" aria-expanded="false">About Us<span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">

            <li><a href="#">Our Core Values</a></li>

          </ul>

      </ul>

    <!-- /.navbar-collapse -->

  </div>

  <!-- /.container-fluid -->

</nav>

</div>

       <!-- Header Image -->

  <div class="container center-block image-fill">

  <div class="row"><img src="images/headerimg.png" class="center-block image-fill" alt="" style="display:block;"></div>

</div>

Thanks!

Deborah