PHP導致標題和橫幅之間的差距

Question

我有一個靜態主頁，我試圖上傳到wordpress。我設法讓網站看起來像我想要的方式在html中，但每當我嘗試在wordpress中打開它，它創造了巨大的差距。我不知道它來自哪裏。我搜索了這個，並聽到關於UTF-8的BOM。我有括號，所以我不確定它是否保存有/沒有BOM。

這裏就是PHP使它看起來像1

這是我希望它看起來像2

網站的地址是mustafasprojects.com

HTML代碼

<!-- Header --> 
      <header id="header"> 
       <h1>Mustafa's Projects</h1> 
       <nav> 
        <ul> 
         <li><a href="#intro">Home</a></li> 
         <li><a href="#about">Who I Am</a></li> 
         <li><a href="#portfolio">My Work</a></li> 
         <li><a href="#contact">Contact</a></li> 
        </ul> 
       </nav> 
      </header> 

CSS

#header { 
     position: fixed; 
     z-index: 10000; 
     left: 0; 
     top: 0; 
     width: 100%; 
     background: rgba(255, 255, 255, 0.95); 
     height: 3em; 
     line-height: 3em; 
     box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1); 
     animation: 1s ease-out 0s 1 SlideInFromTop; 
    } 

     #header h1 { 
      height: 3em; 
      left: 1em; 
      line-height: 3em; 
      margin: 0; 
      padding: 0; 
      position: absolute; 
      top: -.225em; 
      font-size: 1.2em; 
     } 

     #header h1 a { 
       color: #000 
       font-size: 1.1em; 
       border: 0; 
} 

     #header nav { 
      position: absolute; 
      right: 0.5em; 
      top: .525em; 
      height: 1em; 
      line-height: 1em; 
      vertical-align: middle; 
     } 

      #header nav ul { 
       margin: 0; 
      } 

       #header nav ul li { 
        display: inline-block; 
        margin-left: 0.5em; 
        font-size: 0.95em; 

       } 

         #header nav > ul > li a { 
         display: inline-block; 
         height: 1.7em; 
         line-height: 1.7em; 
         padding: 0 .3em; 
         border-radius: 6px; 
        } 

        #header nav > ul > li a:not(.button) { 
         color: #000; 
         display: inline-block; 
         text-decoration: none; 
         border: 0; 
        } 

         #header nav > ul > li a:not(.button).icon:before { 
          color: #999; 
          margin-right: 0.5em; 
         } 

         #header nav > ul > li a:hover:not(.active) { 
          background-color: #266dd3; 
         } 
       #header nav > ul > li:first-child { 
         margin-left: 0; 
        } 
      #header nav > ul > li.active a:not(.button) { 
         background-color: rgba(153, 153, 153, 0.25); 
        } 
        #header nav > ul > li .button { 
         margin: 0 0 0 0.5em; 
         position: relative; 
        } 
    .header.onload-header-fade-down { 
      transform: 0.75s ease-in-out; 
     transition: opacity .75s ease-in-out, transform .75s ease-in-out; 
} 
    body { 
     padding-top: 3em; 
    } 

用PHP

>

<div id="page-wrapper"> 

    <!-- Header --> 
     <header id="header"> 
      <h1>Mustafa's Projects</h1> 
      <nav> 
       <?php html5blank_nav(); ?> 
      </nav> 
     </header> 

我打開它的檢查，似乎我的主類延伸到「家」的頂部，我的頭延伸到合適的長度。那麼這只是一個檢查「主」中的填充問題？

Answer 1

你的主要<div>包裝似乎導致了差距：

#page-wrapper { 
    padding-top: 3em; 
}