CODEWITHSUNDEEP
htmlcss
staum
staum

Reputation: 1

Header border doesn't cover entire top of page

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;
  }

Upvotes: 0

Views: 555

Answers (3)

Ameiz
Ameiz

Reputation: 706

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;
}

Upvotes: 0

Hery Kurniawan
Hery Kurniawan

Reputation: 374

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

Upvotes: 2

Anonymous
Anonymous

Reputation: 557

try this in css :

*{
    padding: 0;
    margin: 0;
 }

Upvotes: 0

Related Questions