Не полное покрытие тега html

Question

При наведении на пустую область сайта происходит то, что вы видите на скриншоте.

При этом не работают медиа запросы и очень кривое отображение на других разрешениях. Вопрос - почему? Песочница: https://codepen.io/Kaze1337/pen/LYywbMJ

<html>
<head>
  <meta name="viewport" content="width=device-width"/>
  <title></title>
  <link rel="stylesheet" href="style.css">
</head>
<body bgcolor="#FAFAFA">
<div class="flex-container3" id="logocontacts"> <!-- верхняя панель -->
  <div style="margin: 5px auto 0 1em"> <!-- телефоны слева -->
   <p>068 831-95-69</p>
   <p>050 824-61-74</p>
   <p>044 334-31-80</p>
   <p>8 800 337 468</p>
  </div>
 <div style="margin: 0 auto;">  
   <a href="index.html"><img src="img/logo.png" class="center"></a>
 </div>
 <div style="margin: 5px 1em 0 auto;"> <!-- адреса справа -->
   <p>г.Киев, ул.Борщаговская, 152а</p>
   <p>г.Киев, Харьковское шоссе,55</p>
   <p>Пн-Пт: 09:00–18:00</p>
   <p>Сб-Нд: выходной</p>
  </div>
 </div>
  <div class="flex-container2" id="header_top"> <!-- панель навигации -->
      <div><a href="index.html">Головна</a></div>
      <div><a href="works.html">Наші роботи</a></div>
      <div><a href="sales.html">Акції</a></div>
      <div><a href="reviews.html">Відгуки</a></div>
      <div><a href="contacts.html">Контакти</a></div>
  </div>
      <section style="margin: 1em auto 2em;" align="center"> <!-- главный центральный текст -->
          <h1>Металопластикові вікна, двері, перегородки у Києві та передмісті.</h1>
          <h1>Балкон під ключ.</h1>
          <h1>Пряма доставка з виробництва безкоштовно в Києві та передмісті</h1>
          <p >Наша команда виготовляє, доставляє і встановлює металопластикові вікна та алюмінієві конструкції різного рівня складності:</p>
          <p >від вікон або дверей або на балкон, до фасадних, офісних і торгових перегородок, тамбурів і веранд.</p>
          <p >Скління будинків, квартир, котеджів і дач.</p>
      </section>
      <div class="flex-container" align="center" > <!-- типы продукции -->
          <div align="center">
            <h1 align="center"><a href="dom.html">Засклити будинок</a></h1>
            <a href="dom.html"><img src="img/dom.jpg"></a>
          </div>
          <div align="center">
            <h1 align="center"><a href="teracce.html">Засклити терасу</a></h1>
            <a href="teracce.html"><img src="img/teracce.jpg"></a>
          </div>    
      </div>
      <div class="flex-container" align="center" >
        <div align="center">
          <h1 align="center"><a href="kvartira.html">Засклити квартиру</a></h1>
          <a href="kvartira.html"><img src="img/kvartira.jpg"></a>
        </div>
        <div align="center">
          <h1 align="center"><a href="balconyonkey.html">Балкон під ключ</a></h1>
          <a href="balconyonkey.html"><img src="img/balconyonkey.jpg"></a>
        </div>    
    </div>
    <div class="flex-container" align="center" >
      <div align="center">
        <h1 align="center"><a href="peregorodki.html">Металопластикові перегородки</a></h1>
        <a href="peregorodki.html"><img src="img/peregorodki.jpg"></a>
      </div>
      <div align="center">
        <h1 align="center"><a href="tambur.html">Засклити тамбур, ганок</a></h1>
        <a href="tambur.html"><img src="img/tambur.jpg"></a>
      </div>    
  </div>
  <div class="flex-container" align="center" >
    <div align="center">
      <h1 align="center"><a href="mp-door.html">Металопластикові двері</a></h1>
      <a href="mp-door.html"><img src="img/mp-door.jpg"></a>
    </div>
    <div align="center">
      <h1 align="center"><a href="mp-okna.html">Металопластикові вікна</a></h1>
        <a href="mp-okna.html"><img src="img/mp-okna.jpg"></a>
    </div>      
</div>
<script src="script.js"></script>   
</body>
</html>```

БЛОГ НА HUSL

Не полное покрытие тега html

Ответы (0 шт):