'How do I format a header separate from my grid layout?

Not sure if I have to format the Header as part of the grid. I tried placing the body selector before the container tag. Also tried using position absolute in the header selector but it obstructed the first column. How would I get a header that doesn't interact with the grid. Also still getting space on top and side despite using margin-top:0;

.d1{background:blue;}
.d2{background:yellow;}
.d3{background:green;}

  
    .container {
        width:80%;
        margin:0 auto;
    }
    header {
        background:#ffd79d; 
    }

    header::after {
        content:'';
        display:table;
        clear: both;
    }
    nav { 
        float:right;
        position:fixed'top: 0; left: 0; right: 0';
    }

    nav ul {
        list-style:none;
        margin:0;
        padding:20px 0;
    }
        
    nav li { 
        display: inline-block;  
        margin-left:20px;
    }

    nav a {
        color:#000;
        text-decoration:none;
        text-transform:uppercase;
    }
    
    nav a:hover {
        color:#ffd79d;
    }
 
 img {
  }
  
    body {
      margin-top:50px;
      display:grid;
      grid-template-columns:20% 80%;
      grid-template-rows:auto;
      grid-row-gap:10px;
    }
<!Doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="content" description="">
    <title>Projects/title>
</head>

<body style="background:-webkit-linear-gradient(#320d3e, #d902ee 50% ,magenta)fixed;" >
<header>
  <div class="container">
        <nav>
            <ul>
                <li><a href="About.html">About<sup>01</sup></a></li>
        <li><a href="Projects.html">Projects<sup>02</sup></a></li>
            <li><a href="Inspiration.html">Inspiration<sup>03</sup></a></li>
            <li><a href="Contact.html">Contact<sup>04</sup></a></li>
            <li><a href="Music.html">Music<sup>05</sup></a></li>
            </ul>
        </nav>
    </div>

</header>

    <img src="" alt="Army ranger logo">
    <p class="d1">Lorem ipsum dolor sit amet, consectetur</p>

    <img src="" alt="Army ranger logo">
    <p class="d1">Lorem ipsum dolor sit amet, consectetur</p>

  <img src="" alt="Army ranger logo">
    <p class="d1">Lorem ipsum dolor sit amet, consectetur
  </p>

</body>

</html>
htmlcsscss-grid


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions