html - Why is my header starting so low? -


it beginning 20px top , not aligned top. if margin-top: -15px; moves text , looks off, text more top . here css code:

body {     background-color: #1a1a1a;     }  header, h1 {     text-align: center;     font-family: cgf locust resistance;     font-size: 50px;     color: lightgray;     -webkit-text-stroke: 1.5px black;    }  header {     margin: 0;     padding: 0;     height: 100px;     border-bottom: 0.5px solid #b3b3b3;     background-image: url(omen.png);     background-repeat: no-repeat;     background-position: center;  }  nav {     position: relative;     top: -5px;     margin: auto;     padding: 0;     list-style: none;     width: 100%;     text-align: center;     border-bottom: 0.5px solid #b3b3b3;  } nav ul li {     display: inline;     color: white;     font-family: cgf locust resistance;     font-size: 12.5px;     padding: 20px; }  .red {     color: red; } 

here html

<!doctype html>  <html>     <head>         <link rel="stylesheet" type="text/css" href="index.css">         <meta charset="utf-8">         <title>gears of war</title>     </head>      <header>         <h1>gears of war</h1>     </header>      <nav>         <ul>             <li>gears of war <span class="red">1</span></li>             <li>gears of war <span class="red">2</span></li>             <li>gears of war <span class="red">3</span></li>             <li>gears of war <span class="red">judgment</span></li>             <li>gears of war <span class="red">4</span></li>         </ul>     </nav>     <body>       </body> </html> 

set margin: 0 h1. can add padding styling.


Comments

Popular posts from this blog

scala - 'wrong top statement declaration' when using slick in IntelliJ -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

PySide and Qt Properties: Connecting signals from Python to QML -