导航栏下的空间

Question

我无法删除第二个导航栏下的不必要空间。这里是该部分的html和css。我还添加了图片以显示它在这种状态下的样子。 Css部分：

.navbar {
    margin-bottom: 0;
    background-color: #04476b;
    z-index: 9999;
    border: 0;
    padding-bottom: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 3px;
    border-radius: 0;

}

.navbar li a, .navbar .navbar-brand {
    color: #fa897f !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: #04476b !important;
    background-color: #fff !important;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}

Html部分：

<nav class="navbar navbar-inverse" style="height: 80px; background-color: lightcoral">
    <div class="container-fluid">
        <div class="navbar-header">
        </div>
    </div>
</nav>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar2">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar2">
            <ul class="nav navbar-nav">
                <li><a href="#intro">Home</a></li>
                <li class="active"><a href="#doctor">Doctor</a></li>
                <li><a href="#doctorlist">Doctor List</a></li>
                <li><a href="#appointment" onclick="document.getElementById('id03').style.display='block'" style="width:auto;">Appointment</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#logout">Logout</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group input-group">
                    <input type="text" class="form-control" placeholder="Search Doctor..">
                    <span class="input-group-btn">
            <button class="btn btn-default" type="button">
              <span class="glyphicon glyphicon-search"></span>
            </button>
          </span>
                </div>
            </form>
            </ul>


        </div>

    </div>

    <div id="id03" class="modal" tabindex="-1" role="dialog" aria-hidden="true">

        <div class="modal-dialog" action="">
            <div class="modal-content animate">
                <div class="imgcontainer">
                    <span onclick="document.getElementById('id03').style.display='none'" class="close" data-dismiss="modal"title="Close Modal">&times;</span>
                    <img src="app.png" style="height: auto" width="auto" alt="Avatar" >
                </div>

                <div class="container2">
                    <label><b>Mail ID</b></label>
                    <input type="text" placeholder="Enter Username" name= "mailID" id="mailID" required>
                    <p id="mailIdErr"></p>

                    <label><b>Password</b></label>
                    <input type="password" placeholder="Enter Password" name="psw" id="psw" required>
                    <p id="pswErr"></p>

                    <button id ="submit" type="submit" style="height: auto" width="auto" onclick="globalAppointment()">Submit</button>
                    <p id="loginErr"></p>
                    <!--<button type="submit" style="height: auto" width="auto" onclick="document.getElementById('id02').style.display='block'
                     "href="#myModal1" data-toggle="modal">Make Health Card</button>-->
                    <br>
                    <button type="button" onclick="document.getElementById('id03').style.display='none'" class="cancelbtn"data-dismiss="modal">Cancel</button>
                </div>

            </div>
        </div>

    </div>
</nav>