动态制表符div为导航栏提供边距

Question

当我给作为动态制表符div的.container提供margin-top时，它还为导航栏提供了边距，这是一个完全独立的div，就像这样

<div class="wrapper">
<ul class="nav-wrapper">
    <a href="homePage.html"><img id="logo" src="Images/dramay.jpg"></a>
      <li class="dropdown">

        <a href="#" class="dropbtn">Movies & TV &#9207;</a>

        <div class="dropdown-content">
          <a href="#" id="mov"><b style="font-size: 15px">MOVIES</b></a>
           <a href="#">In Theaters</a>
          <a href="#">Coming Soon</a>
          <a href="category.html">Categories</a>
           <a href="#">Most Popular</a>
           <a href="#" id="tv"><b style="font-size: 15px" > TV </b></a>
           <a href="#" >Timings</a>
           <a href="#">Latest shows</a>
           <a href="#">Top rated</a>
        </div>
      </li>

      <li class="dropdown">
        <a href="#" class="dropbtn">Celebs & photos &#9207;</a>
        <div class="dropdown-content">
        <a href="#"><b style="font-size: 15px">Celebs</b></a>
        <a href="#">Born today</a>
        <a href="#">Most popular</a>
        <a href="#"><b style="font-size: 15px">Photos</b></a>
        <a href="#">latest stills</a>
        <a href="#">Latest posters</a>

        </div>

      </li>
        <li class="dropdown">
        <a href="news.html" class="dropbtn" >News &#9207;</a>
        <div class="dropdown-content">
          <a href="news.html"><b style="font-size: 15px">News</b></a>
          <a href="#">Top news</a>
          <a href="#">Movies news</a>
          <a href="#">TV news</a>
        </div>

      </li>
        <li class="dropdown">
        <a href="#" class="dropbtn">Watchlist &#9207;</a>
        <div class="dropdown-content">  
          <a href="#"><b>Watchlist</b></a>
          <a href="#">Watch Later</a>
          <a href="#">Recently added</a>
        </div>

      </li>
     <li class="search" style="float:right;"><a>
      <input type="text" name="firstname" placeholder="SEARCH">
     </a>
     </li>

        <li class="dropdown" id="signOUT">
            <a href="index.html" class="dropbtn">Log out</a>
        </li>

    </ul>


    </div>

这是动态制表符div。我在这里使用插件。

div class="container" style="border:1px solid red; margin-top:30px;">
  <h2 >Catogories</h2>
  <p></p>

  <ul class="nav nav-tabs" style="postion: absolute">

    <li><a data-toggle="tab" href="#menu1" style="color: #333">Comedy</a>
  </li>
    <li><a data-toggle="tab" href="#menu2" style="color: #333">Thriller</a>
 </li>
    <li><a data-toggle="tab" href="#menu3" style="color: #333">Action</a>
 </li>
    <li><a data-toggle="tab" href="#menu3" style="color: #333">Drama</a>
</li>  
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
     <a href="homePage.html" target="#home"> <h3 style="color: 
 green">DRAMAY.PK</h3></a>

    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Comedy</h3>
    <img src="Urwa-in-Na-Maloom-Afraad.gif">
    <figcaption>Na Maloom Afraad 2 will release this year in september. Fans 
 have high hopes from fahad mustafa in this upcoming sequel of the original.
 </figcaption>

    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Thriller</h3>
      <img src="div1img1.jpg">
      <figcaption>Mera yar mila dey iss a thriller featuring hamyun 
 saeed</figcaption>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Action</h3>
    <img src="raees.jpg">
    <figcaption>Raees is bollywood movie featuring Mahira khan as the main 
acting role.</figcaption>
    </div>
  </div>
</div>  

这是导航的CSS：

.wrapper
{
    width: 100%;
    height: auto;
    font-family: arial;
    background: #333;

}


ul#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: inherit;
    width: 100%;
    overflow: visible;
    background: #333;
}


.nav-wrapper
{
    position: fixed;
    width: 100%;

}

li {
    float: left;
}

ul#nav li { 
    position: relative;
}

li a, .dropbtn {
    display: inline-block;
    color: lightgrey;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color:#00b300;
}

li a:hover, .search:hover  {
    background-color:black;

}
li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    color:black;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    left: 0px;
    top:100%;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 15px;
    z-index: 1;
}

.dropdown-content a:hover {
background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

我需要将nav div和动态制表符div分开。