hmmmm | HTML5 e CSS3 parte 4: avançando no CSS

alguém pode me ajudar a tirar a parte branca de cima html `

    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="nb.css">
</head>
<body>
    <div>
    <form>
        <label for="pesquisa aqui"></label>
        <input type="text" id="pesquisa aqui" class="input-padrao" required placeholder="o que você procura hoje"><button type="subimit" class="input"> <img src="lupa-de-pesquisa.png" ></button>
            </nav>
    </form>
            <h1><img class="caixa" src="bia.png"></h1>
             <link rel="stylesheet" type="text/css" href="nb.html">

        </div>
    <header>
    </main>
                <nav class="cabecalho">
            <div class="cabeloja">
            <ul>

                     </div>
                        <div class="compras">
                  <a href="carrinho.html">
                        <ol> 
                              <li></li>
                              <li><img class="carrinho" src="shopping-bag--v1.png"></li>
                        </ol>
                  </a>
            </div>
  </ul>
        </div>                            <div class="desejos">
                  <a href="carrinho.html">
                        <ol> 
                              <li>lista de desejos</li>
                              <li><img class="lista" src="02,.jpg"></li>
                        </ol>
                  </a>
            </div>
 </header>
        <nav class="categoria">
     <header class="categorias">
        <a>Promoções</a>
        <a>Feminino</a> 
        <a>Masculino</a>
        <a>Acessórios</a>
        <a>sandalia</a>
    </header>
        </nav>

    <footer>
        <img src="468a0d7a-44ad-46e1-b0aa-7bd6dfc7a99c.jpg">
        <p class="copyright">&copy; Copyright NB boutique - 2021</p>
    </footer>

</body>

css

css 

div{
        background: #000000;
}
header {
    background: #000000;

}

nav {
    position: absolute;
    top: 110px;
    right: 190px;
}

nav li {
    display: inline;
    margin: 0 0 0 30px;
}
.relative-parent {
   line-height: 20px;
}

.relative {
   height: 200px;
   line-height: 10px;
   font-family:  'Josefin Sans', sans-serif;
}

nav a {
    text-transform: uppercase;
    color: #bbbbbb;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover {
    color: #C78C19;
    text-decoration: underline;
}

form input{
    display: block;
    padding: 10px 25PX;
    width: 30%;
    text-align: center;
    height: 10px;
    position: relative;
    top: 0px;
    left: 350px;
}

main {
    width: 940px;
    margin: 0 auto;
}

button {
    width: 5%;
    display: inline-block;
    vertical-align: top;
    margin-top: 0px;     
}

.caixa {
    position: relative;
    left: 2em;
    margin: 0 auto;
    top: -30px;
}

.input-padrao {
    vertical-align: top;
    margin-top: 10px; 
    color: #000000;
}

.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;
}

footer {
    text-align: center;
    background: url("si_pretomit.png");
    padding: 40px 0;
}

.titulo-principal {
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
}

.mapa-conteudo {
    width: 740px;
    margin: 0 auto;
}

.input {
    position: relative;
    margin-top: 5px; 
    left: 880px;
    top: -40px;
} 

.big {
    border-left: 150px;
}

.pagination>li>a {
    border-radius: 50% !important;margin: 0 1px;
    top: -50em;
 }

.categoria {
    text-align: center;
    font-size: 50px;
    position: relative;
    margin: 0 auto;
    margin-top: 15px; 
    right: 0px;
    top: -15px;
    background: linear-gradient(#ffffff, #ffffff);
    font-family: 'Lexend Mega', sans-serif;
    color: #ffffff;
}

.categorias {
   margin-top: 15px; 
}

.intensa {
    right: 15px;
}

/*carrinho de compras*/

.compras img {
      height: 30px;
      width: 30px;
      line-height: 10px;
      right: 5px;
      color: #ffffff;
}
.compras {
      font-size: 10px;
      padding-right: 5px;
      text-align: right;
      height: 25px;
      position: relative;
      float: right;
      bottom: 100px;
      clear: right;
      left: 140px;
      margin-top: 15px; 
      color: #ffffff;
}
.compras ol li {
      display: inline;
      text-align: center;
      list-style-type: none;
      color: #ffffff;
}
.carrinho {
      position: absolute;
      bottom: 2px;
      color: #ffffff;
}
.compras a {
      text-decoration: none;
      color: #ffffff;
}
.cabeloja {
      left: 150px;
      color: #ffffff;
}
/*fim do carrinho de compras*/

/*login*/

.login img {
      height: 30px;
      width: 30px;
      left: 125px;
      color: #ffffff;
      top: -24px;
}
.login {
      padding-right: 1px;
      text-align: right;
      position: relative;
      float: right;
      clear: right;
      margin-top: 16px; 
      color: #ffffff;
      top: -100px;
      right: -50px;
}
.login ol li {
      display: inline;
      text-align: center;
      list-style-type: none;
      color: #ffffff;
}
.login {
      position: absolute;
      left: -100px;
      color: #ffffff;
}
.login a {
      text-decoration: none;
      left: 30px;
      color: #ffffff;
}
.cabeloja {
      left: 10px;
      color: #ffffff;
}
/*fim do login*/

/*lista de desejos*/
.desejos img {
      height: 30px;
      width: 30px;
      line-height: 10px;
      right: -15px;
      color: #ffffff;
}
.desejos {
      font-size: 10px;
      padding-right: 5px;
      text-align: right;
      height: 25px;
      position: relative;
      float: right;
      bottom: 100px;
      clear: right;
      left: -120px;
      margin-top: -25px; 
      color: #ffffff;
}
.desejos ol li {
      display: inline;
      text-align: center;
      list-style-type: none;
      color: #ffffff;
}
.lista {
      position: absolute;
      bottom: 2px;
      color: #ffffff;
}
.desejos a {
      text-decoration: none;
      color: #ffffff;
}
.cabeloja {
      left: 150px;
      color: #ffffff;
}
/*fim da lista de desejo*/

/*produtos*/
/*fim do produtos*/

Chegou a hora de transformar