My website code is working fine but when i put in the w3c validator it shows me some errors and when i fix them my website gets all messed up. Basically my code is working with the "errors" that the validator points me. I don't know what to do since this code is a test for my college and probably my professor will put the code at the validator too.

I'm a beginner at programming so i did the html and the css separately (there is no js because i don't know how to use it and my professor didn't teach us yet)

```css
* {
  overflow-x: hidden;
  padding: 0px !important;
  margin: 0px !important;
}
#container{
  width: 1348px;
  height: 312px;
  margin: 0 auto;
  background-color: #FFFFFF;
}
.logo {
  width: 208px;
  height: 208px;
  background: url("../IMG/logo.png");
  position: absolute;
  top: 55px;
  left: 87px;
  border-radius: 50%;
}
.caixa_texto_quemsomos {
  width: 172px;
  height: 27px;
  position: absolute;
  top: 156px;
  left: 512px;
  overflow: hidden;
}
.quemsomos {
  width: 172px;
  color: #000000;
  position: relative;
  top: 0px;
  left: 0px;
  font-family: Roboto;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
}
.caixa_texto_contato {
  width: 172px;
  height: 27px;
  position: absolute;
  top: 156px;
  left: 757px;
  overflow: hidden;
}
.contato {
  width: 172px;
  color: #000000;
  position: relative;
  top: 0px;
  left: 0px;
  font-family: Roboto;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
}
.barralaranja1 {
  width: 100%;
  height: 14px;
  background: #FB9324;
  position: absolute;
  top: 300px;
  left: 0px;
  overflow: hidden;
}
.section_foto {
  width: 450px;
  height: 505px;
  position: absolute;
  top: 378px;
  left: 415px;
  overflow: hidden;
}
.foto {
  width: 450px;
  height: 450px;
  background: url("../IMG/foto.jpeg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.maisdetalhes {
  width: 174px;
  color: #000000;
  position: absolute;
  top: 479px;
  left: 138px;
  font-family: Roboto;
  font-size: 22px;
  text-align: center;
  text-decoration: none;
}
.div_rodape {
  width: 100%;
  height: 85px;
  position: absolute;
  top: 939px;
  left: 0px;
  overflow: hidden;
}
.rodape {
  width: 100%;
  height: 78px;
  background: #5DBCD2;
  position: absolute;
  top: 7px;
  left: 0px;
  overflow: hidden;
}
.direitosreservados {
  width: 338px;
  color: #000000;
  position: absolute;
  top: 32px;
  left: 174px;
  font-family: Roboto;
  font-size: 24px;
  text-align: center;
}
.ajuda {
  width: 81px;
  color: #000000;
  position: absolute;
  top: 32px;
  left: 798px;
  font-family: Roboto;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
}
.barralaranja2 {
  width: 100%;
  height: 14px;
  background: #FB9324;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.instagram {
  width: 53px;
  height: 53px;
  background: url("../IMG/instagram.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 22px;
  left: 1096px;
  overflow: hidden;
}
```

```html
<!DOCTYPE html>
<html lang="pt-br">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/Index.css">
<head>
    <title>Gente - Arquitetura Colaborativa</title>
</head>

<body>

    <div id=container>
    <header>
        <figure class="logo">
            <img src="IMG/logo.png" alt="logo_img">
        </figure>

        <nav class="caixa_texto_quemsomos">
            <a class="quemsomos" href="Quem_Somos.html" target="_blank">QUEM SOMOS</a>
        </nav>

        <nav class="caixa_texto_contato">
            <a class="contato" href="Contato.html" target="_blank">CONTATO</a>
        </nav>

    </header>
    </div>

    <div class="barralaranja1"></div>

    <main>
        <section class="section_foto">

        <figure class="foto">
            <img src="IMG/foto.jpeg" alt="foto_img">
        </figure>

        <a class="maisdetalhes" href="Redirecionamento_Imagem.html" target="_blank">Mais detalhes...</a>
        </section>
    </main>

    <footer>
        <div class="div_rodape">
            <div class="rodape">
        </div>

        <div class="barralaranja2"></div>

        <p class="direitosreservados">Todos os direitos reservados ©</p>

        <a class="ajuda" href="Index.html" target="_blank">Ajuda</a>

        <a class="instagram" href="https://www.instagram.com/gentearq/" target="_blank">
            <img src="IMG/instagram.png" alt="instagram_img">
        </a>
    </footer>

</body>

</html>
```

The errors are:

1. Error: Start tag head seen but an element of the same type was already open. From line 5, column 1; to line 5, column 6 dex.css">↩↩ <tit
2. Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. From line 31, column 3; to line 31, column 32 ↩ ↩↩ <f
3. Error: End tag footer seen, but there were open elements. From line 55, column 2; to line 55, column 10 >↩ ↩ ↩↩</bo
4. Error: Unclosed element div. From line 42, column 3; to line 42, column 26 footer>↩ ↩ <d