Header border doesn't cover entire top of page-CodePudding

I'm very new to html and css and when trying to make a navbar, the colour doesn't cover the entire top of page. I've tried adjusting the height and width but to no luck. Here is what the webpage looks like at the moment. As you can see, the blue header doesn't quite touch the top and sides. Any help would be greatly appreciated. Here is the index.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    
    <title>Noe ice-cream for you</title>
</head>

<body style="background-color: gray;">
    
    <header>
        <div class="container">
            <img src="assets/subzero.png" alt="logo" class="logo" height="70px">

            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>

                </ul>


            </nav>
        </div>
    </header>



</body>
</html>

And here is the style.css file:

h1{
    font-family: 'Open Sans', sans-serif;
}

.paragraph{
    font-size: medium;
    line-height: 62px;
    font-family: 'Open Sans', sans-serif;
}

.container{
    font-family: 'Open Sans', sans-serif;
}

header{
    background-color:aqua;
    padding: 0;
    margin: 0;
}

.logo{
    float: left;
    padding: 10px 0;
}

nav{
    float: right;
}

header::after {
    content: '';
    display: table;
    clear: both;
  }

  nav ul{
    margin: 0;
    padding: 0;
    list-style:none;
  }

  nav li{
      display: inline-block;
      margin-left: 70px;
      padding-top: 50px;
  }

  nav a{
      text-decoration: none;
      text-transform: uppercase;
      color: #444;
  }

  nav a:hover{
      color:black;
  }

CodePudding user response：

You can add below on your style.css

body {
  margin:0;
  padding:0;
}

or add

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.css"

on your head tag before including tag link style.css

CodePudding user response：

try this in css :

*{
    padding: 0;
    margin: 0;
 }

CodePudding user response：

haz esto y me dices *{ padding: 0; margin: 0; }

CodePudding user response：

Always start by resetting your document and setting the box-sizing property. With box-sizing padding and border are added to the element's height and width. So you can do something like this

*, ::after, ::before {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}