title: ul not going in a div for the header
body: <p>i'm trying to make a transparent header for my website, but for some reason the ul is going below the div. any help?
  code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;aindev's Website&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&amp;display=swap" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="header"&gt;
          &lt;h1&gt;aindev&lt;/h1&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="downloads.html"&gt;Downloads&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <pre><code>*{
      margin: 0;
      padding: 0;
  }
  body{
      font-family: Rubik;
  }
  .header{
      width: 100%;
      height: 80px;
  
  }
  .header h1{
      text-align: center;
  }
  .header ul li{
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: inline;
  }
  </code></pre>
  
  <p>i tried many stackoverflow questions and other forums for coding, but all don't seem to help. i tried modifying the z-index, doing clear:both; and basically everything i could do.</p>