標題與導航鏈接不相關

Question

我已將我的圖標標題從mainHeader下方移至其上方。這很好，但我喜歡mainHeader上方的圖標標題，但我的導航欄中的鏈接位於我的mainHeader下面。我試圖使用填充，邊距和頂部，但它仍然存在。這是我的​​。我的JSFiddle與我的實際HTML和CSS略有不同，因爲我的所有文件都放在了我的主目錄中的一個文件夾中。這是我的HTML和CSS：

HTML

<!--HEADER OF WEBSITE--> 
      <!--Icon Header--> 
      <div class="bottomHeader"> 
       <div id="icon-navwrap"> 
        <ul id="icon-nav"> 
         <li id="fb"><a href="#"><img src="Header/facebook.png" width="30px" height="30px"/></a></li> 
         <li><div id="mini-divider"></div></li> 
         <li id="yt"><a href="https://www.youtube.com/channel/UCjN6SKbr8ksAajUdcBJrFOQ"><img src="Header/youtube.png" width="30px" height="30px"/></a></li> 
         <li><div id="mini-divider"></div></li> 
         <li id="tt"><a href="https://twitter.com/clan_next_gen"><img src="Header/twitter.png" width="30px" height="30px"/></a></li> 
         <li><div id="mini-divider"></div></li> 
        </ul> 
       </div> 
      </div> 
      <!--End of Icon Header--> 

      <!--Main Header--> 
      <div class="mH-clearfix"> 
      <!--Main Header Logo--> 
       <div id="mainHeader"> 
         <div id="header_logo"> 
          <a href="file:///C:/Users/Swag/Desktop/My%20Website/Home/home.html"><div id="logo"><img src="Header/banner.png" alt="Logo" width="300"height="100"></a> 
         </div> 
        <!--End of Logo--> 

        <!--Main Header Links--> 
         <div id="nav-wrap"> 
          <ul id="nav"> 
           <li><a href="file:///C:/Users/Swag/Desktop/My%20Website/Roster/roster.html">Roster</a></li> 
           <li><a href="file:///C:/Users/Swag/Desktop/My%20Website/Gallery/gallery.html">Gallery</a></li> 
           <li><a href="file:///C:/Users/Swag/Desktop/My%20Website/Sponsors/sponsors.html">Sponsors</a></li> 
           <li><a href="file:///C:/Users/Swag/Desktop/My%20Website/About/about-us.html">About Us</a></li> 
          </ul> 
         </div> 
         <!--End of Main Header Links--> 

        </div> 
       </div> 
      </div> 
      <!--End of Main Header--> 
     </div> 

CSS

/*================= 
======= Body ====== 
=================*/ 

* { 
    margin: 0; padding: 0; 
} 

body { 
    font-family: "Montserrat"; 
    font-size: 115%; 
    background-image: url(background.png) 
} 

/*======================= 
====== Header Logo ====== 
=======================*/ 

#mainHeader { 
    background-color: #02236a; 
} 

.mH-clearfix { 
    height: auto; 
    width: 100%; 
    content: ""; 
    clear: both; 
} 

#nav { 
    margin-left: 25%; 
} 

/*========================== 
======= Icon Header ======== 
==========================*/ 

.bottomHeader { 
    background: #000b22; 
    width: 100%; 
    height: 30px; 
    margin: 0 auto; 
    position: absolute; 
    margin: 0; 
    overflow: hidden; 
} 

#icon-nav li { 
    float: left; 
    background-size: 50%; 
    transition: background-color 0.5s ease; 
} 

#mini-divider { 
    position: absolute; 
    top: 1%; 
    bottom: 1%; 
    border-left: 1px solid white; 
} 

#fb:hover { 
    background-color: #3f5c9a; 
} 

#yt:hover { 
    background-color: #bd2826; 
} 

#tt:hover { 
    background-color: #3f8dcb; 
} 


/*=============== 
====== Nav ====== 
===============*/ 

#nav { 
    list-style: none; 
} 

#nav a { 
    position: relative; 
    color: #fff; 
    text-decoration: none; 
} 

#nav li { 
    float: left; 
    margin-left: 50px; 
    border-radius: 5px; 
    line-height: 100px; 
} 

#nav a:hover { 
    color: #fff; 
} 

#nav a:before { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 2px; 
    bottom: 0; 
    left: 0; 
    background-color: #fff; 
    visibility: hidden; 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
    -webkit-transition: akk 0.3s ease-in-out 0s; 
    transition: all 0.3s ease-in-out 0s 
} 

#nav a:hover:before { 
    visibility: visible; 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
} 

/*============================ 
======= Miscellaneous ======== 
============================*/ 

a { 
    text-decoration: none; 
} 

li { 
    list-style: none; 
} 

Answer 1

好的解決您的樣式問題：

1. 添加margin-top: 30px;和display: inline-block;到#logo
2. 添加display: inline-block;到＃NAV-包裹
3. 從#nav

此刪除margin-left: 25%;應該修復的標題。