Having trouble making the color of my header take up the top of the page-CodePudding

I am relatively new to this. I am in school and need to complete an assignment for my html5/CSS class. I am having trouble making the blue color take up the top part. I do not want to have white space on the top.

Thanks in advance!

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

<head>
    <title>Home</title>
    <meta charset="utf-8">
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color:#FDFAF7;
            font-family: Verdana,Arial,sans-serif; 
        }
        header{
            margin: 0;
            padding: 0;
            background-color: #2972C6;
            width: 100%;
            height: 500px;
        }
        
    </style>
</head>
    <body>
        <header> 
            <h1>My Portfolio</h1>
        </header>
    
        <nav>
        </nav>  
        
        <main>
        <div>
        </div>
        </main>
            
        <footer>
            
        </footer>       
    </body>
</html>

CodePudding user response：

its happend because of h1 having a margin you can either set its margin to 0 or set all the elements margin and padding to 0.

header h1{
        margin: 0;
    }

*{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

CodePudding user response：

try this:

<style>
  * {
       margin: 0;
       padding: 0;
    }
    body{
        margin: 0;
        padding: 0;
        background-color:#FDFAF7;
        font-family: Verdana,Arial,sans-serif; 
    }
    header{
        margin: 0;
        padding: 0;
        background-color: #2972C6;
        width: 100%;
        height: 500px;
    }
    
</style>

<style>
  h1 {
       margin: 0;
       padding: 0;
    }
    body{
        margin: 0;
        padding: 0;
        background-color:#FDFAF7;
        font-family: Verdana,Arial,sans-serif; 
    }
    header{
        margin: 0;
        padding: 0;
        background-color: #2972C6;
        width: 100%;
        height: 500px;
    }
    
</style>