Buongiorno/buonasera.

Come da titolo ho un problema nel ridimensionare l'header della mia pagina, anche se ho messo che la larghezza debba occupare il 100%. Ho provato in molti modi ma purtroppo non sono riuscito a risolvere. Spero in un vostro aiuto. Qui di seguito lascio codici HTML e CSS:

HTML:
codice HTML:
<!DOCTYPE html>
<html lang="it">
<head>
    <title>TES</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class ="header">
    <div class="headerContent">
        TES s.p.a
    </div>
</div><br><br><br><br>
 <form name = "login" method = "GET" action="test.php">
    <p>
     <input type="text" placeholder="username o email" name = "email" size = 20><br/><br/>
     <input type="password" placeholder="password" name = "password" size = 20><br/><br/>
     <button class = "button" type="submit">login</button>
    </p>
 </form>
    <h2>non hai un account? registrati ora.</h2><br/>
    <div class="footer">
           Developed by TES spa. All rights reserved &copy
   </div>
</body>
</html>
CSS:
codice:
  h2{text-align: center; font-size: 30px }
    
  .header{
    background-color: grey;
    }

.headerContent{
  font-size: 50px;
  font-weight: bold;

  }

    body {
                
   display: inline-block;     /* Serve a far collassare i magini dei contenuti adiacenti ai limiti del body, i quali influirebbero altrimenti sullo stesso body */
   position: relative;        /* Blocca il riferimento dei contenuti con position absolute anche durante lo scroll della pagina */
   width: 100%;               /* Con inline-block la larghezza è relativa ai contenuti, quindi è necessario estenderla per l'intera larghezza della finestra */
   min-height: 100%;          /* Estende l'altezza del body per tutta la finestra anche se ci sono pochi contenuti, evitando che in tal caso il .footer si porti in mezzo alla pagina */
   margin: 0;                 /* Rimuove i margini di default per ottenere un corretto dimensionamento */
         }
    
   html {
    background: url('sfondo1.png') no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;                   /* Garantisce che il tag html si estenda sempre per tutta l'area della finestra e non in base ai contenuti */

   }
        
    p {
        text-align: center;
     }
    
    input[type=text] {
    width: 20%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;}

    input[type=password] {
    width: 20%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;}

    .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 20px 70px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 13px;
}


.footer{
   position: absolute;        /* Posiziona il footer in modo assoluto, sempre in fondo alla pagina, cioè rispetto al body */
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: grey;
   color: white;
   text-align: center;
   padding: 15px;
 }
grazie per l'interessamento.