Открываю сайт он сьезжает когда масштаб делаю 25% в гугле

body {
  background: #DFDFDF
}

#conteiner {
  width: 88%;
  margin: 30px auto
}

#header {
  width: 20%;
  height: 100px;
  background: white;
  float: left
}

.logo {
  width: 30%;
  height: 92%;
  margin: 1%;
  float: right
}

.logo1 {
  width: 64%;
  height: 40%;
  margin: 8% 1%;
  padding: 1% 1%;
  float: left
}

#novigation {
  width: 80%;
  height: 100px;
  padding: 0;
  background: white;
  float: right
}

#clear {
  clear: both
}

#content {
  width: 100%;
}

.a1 {
  width: 90%;
  margin: 4% 4% 0.5% 4%;
  padding: 1%;
  height: 400px;
  border-radius: 17px;
  background: white
}

.a1:hover {
  box-shadow: 5px 5px 80px
}

.b1:hover {
  box-shadow: 5px 5px 80px
}

.c1:hover {
  box-shadow: 5px 5px 80px
}

.aa1 {
  width: 43%;
  margin: 0 0.5% 0 5%;
  padding: 1%;
  height: 310px;
  background: white;
  float: left
}

.text1 {
  margin: 0.5%;
  padding: 1%;
  background: white;
  height: 140px
}

.qq {
  margin: 0.5% 0.5% 0.5% 1.5%;
  padding: 2% 5% 2% 5%;
  border-radius: 7px;
  background: #A90808;
  height: 11%;
  color: black;
  text-decoration: none;
  float: left
}

a.qq:hover {
  box-shadow: 5px 5px 80px;
  background: #E41717
}

a.qq:active {
  background: white
}

.qx {
  margin: 0.5% 1%;
  padding: 3% 5% 3% 5%;
  border-radius: 7px;
  background: #A90808;
  height: 11%;
  color: black;
  text-decoration: none;
  float: left
}

a.qx:hover {
  box-shadow: 5px 5px 80px;
  background: #E41717
}

a.qx:active {
  background: white
}

.img9 {
  width: 16%;
  margin: 0 0.5% 0 0.5%;
  padding: 2%;
  background: white;
  height: 280px;
  float: left
}

.img8 {
  width: 16%;
  margin: 0 5% 0 0.5%;
  padding: 2%;
  background: white;
  height: 280px;
  float: left
}

.b1 {
  width: 39.5%;
  margin: 0.5% 0.5% 0.5% 4%;
  padding: 1% 1% 1% 5%;
  height: 340px;
  border-radius: 17px;
  background: white;
  float: left
}

.img3 {
  width: 30%;
  margin: 0.5% 2% 0.5% 2%;
  padding: 2.5%;
  height: 290px;
  background: white;
  float: left
}

.img4 {
  width: 37%;
  margin: 0.5% 0.5% 0.5% 0.5%;
  padding: 2.5%;
  height: 290px;
  background: white;
  float: left
}

.bb1 {
  width: 50%;
  margin: 0.5% 2% 0.5% 2%;
  padding: 10% 2% 2% 2%;
  height: 240px;
  float: left
}

.cc1 {
  width: 50%;
  margin: 0.5% 0.5% 0.5% 2%;
  padding: 10% 2% 2% 2%;
  height: 240px;
  text-align: center;
  float: right
}

.e1,
.r1 {
  width: 43.5%;
  padding: 1% 1% 1% 1%;
  height: 340px;
  border-radius: 17px;
  background: white;
  float: left
}

.e1 {
  margin: 0.5% 0.5% 0.5% 4%;
}

.r1 {
  margin: 0.5% 4% 0.5% 0.5%;
}

a.qe {
  margin: 0.5% 33%;
  padding: 3% 5% 3% 5%;
  border-radius: 7px;
  background: #A90808;
  height: 11%;
  color: black;
  text-decoration: none;
  float: left
}

.text2 {
  margin: 0.5%;
  padding: 2% 0 2% 1%;
  height: 100px
}

.c1 {
  width: 39.5%;
  margin: 0.5% 4% 0.5% 0.5%;
  padding: 1% 1% 1% 5%;
  height: 340px;
  border-radius: 17px;
  background: white;
  float: right
}

.d1 {
  width: 22%;
  margin: 0.5%;
  padding: 1%;
  height: 115px;
  background: white;
  float: left
}

.qw {
  width: 8%;
  margin: 0%;
  padding: 5% 0% 5% 0%;
  height: 68%;
  background: white;
  float: left
}

.text3 {
  width: 73%;
  margin: 0%;
  padding: 5% 0% 5% 0%;
  height: 68%;
  background: white;
  float: right
}

.googlemaps {
  width: 94%;
  margin: 3%;
  text-align: center;
}

.contacts {
  width: 94%;
  margin: 3%;
  text-align: center;
  color: #A90808;
}

.glava {
  width: 62%;
  float: right;
  margin-top: 0.75%;
  margin-right: 10%;
}

.shop {
  width: 30%;
  height: 600px;
  margin: 0.5%;
  padding: 1%;
  background: white;
  float: left;
}

.shop:hover .img1 {
  display: none
}

.shop:hover .img2 {
  display: block
}

.img2 {
  width: 80%;
  height: 42%;
  margin: 0;
  padding: 10%;
  display: none
}

.text {
  width: 98%;
  height: 8%;
  margin: 1%;
  padding: 0;
}

.img1 {
  width: 80%;
  height: 42%;
  margin: 0;
  padding: 10%;
}

.xa,
.ax {
  width: 46%;
  height: 17%;
  margin: 1%;
  padding: 1%;
  float: left;
}

.xa {
  color: gray;
}

.xq {
  width: 98%;
  height: 4%;
  margin: 1%;
  padding: 0;
}

a.buttom,
a.buttomshop {
  display: inline-block;
  height: 35px;
  margin: 2%;
  padding: 1%;
  padding-top: 4%;
  float: left;
  font-size: 150%;
  text-align: center;
  text-decoration: none;
  border: solid 1px;
  width: 43%;
  color: black;
  font-family: Monotype Corsiva;
}

a.buttom {
  background: white;
  border-color: black;
}

a.buttomshop {
  background: #A90808;
  border-color: #A90808;
}

a.buttom:hover,
a.buttomshop:hover {
  background: #E41717;
}

a.buttom:active,
a.buttomshop:active {
  background: white;
}

.filter {
  width: 16%;
  float: left;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 10%;
  margin-right: 1%;
  padding: 0.5%;
  background: white;
  font-size: 20px;
  font-family: Monotype Corsiva;
  color: #A90808;
}

.textp {
  width: 50%;
  height: 20px;
  float: left;
}

.gg {
  width: 30%;
  height: 25px;
  border-radius: 12px;
  margin: 2px;
  float: right;
}

.nm {
  width: 25%;
  float: left;
  margin-left: 5%;
  margin-right: 5%;
}

.mn {
  width: 100%;
  margin: 0 15%;
}

.slidecontainer {
  text-align: center;
}

.cpu input {
  transform: scale(2.0);
  margin: 2% 4%;
  color: red;
  background: red;
}

.gltext {
  color: #A90808;
  font-family: Monotype Corsiva;
  font-size: 40px;
  text-align: center;
  margin: 1%;
}

.prblok {
  width: 86%;
  height: 430px;
  margin-top: 1%;
  margin: 1% 5%;
  padding: 1% 2%;
  background: white;
}

a.pr {
  display: block;
  width: 15.55%;
  margin: 0.25%;
  padding: 0.3%;
  float: left;
  background: white;
  text-align: center;
  text-decoration: none;
  color: black;
}

.pr:hover {
  box-shadow: 1px 1px 10px
}

.pr:active {
  box-shadow: 1px 1px 15px;
  color: #A90808
}

.prt {
  width: 99%;
  padding: 0.5%;
}

.prtxt {
  width: 99%;
  padding: 0.5;
  font-size: 20px;
  font-family: Monotype Corsiva;
  color: #A90808;
}

.e1:hover,
.r1:hover {
  box-shadow: 5px 5px 80px
}

#footer {
  width: 100%;
  height: 20px;
  background: gray
}

#red {
  width: 100%;
  height: 10%;
  background: #A90808;
}

#now ul {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%;
  box-shadow: 4px 4px 20px;
  color: #A90808;
}

#now li {
  width: 13%;
  float: left;
  position: relative;
  height: 100%;
  margin: 1.5% 0.5%;
}

#now li:hover ul {
  display: block
}

#now,
#now ul {
  margin: 0;
  padding: 0 1%;
  background: white;
  list-style-type: none;
}

#now {
  height: 64%;
  background: white;
  padding-left: 1%;
  padding-right: 1%;
  width: 98%
}

#now li a {
  display: block;
  padding: 1%;
  width: 98%;
  color: #A90808;
  text-decoration: none;
  text-align: center;
}

#now ul li {
  float: none
}

#now li a:hover {
  box-shadow: 4px 4px 20px;
}

#now ul li {
  width: 98%;
  background: white;
}

<!DOCTYPE html>
<html>

<head>
  <title> Сборка и продажа ПК </title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <meta name="keywords" content="Компьютер, ПК, Сборка ПК, Купить ПК">
  <meta name="description" content="Сборка и продажа персональных компьютеров и ноутбуков">
  <meta name="author" content="Balan Denys Olegovich">
  <link rel="shortcut icon" href="pict/favicon.png">
  <link rel="stylesheet" href="style.css" type="text/css">
  <link rel="stylesheet" href="novigation.css" type="text/css">
</head>

<body>
  <div id="conteiner">
    <div id="header">
      <div class="logo1"><img src="logo/logo.jpg" height="100%"></div>
      <div class="logo"><img src="pict/logo.png" height="100%"></div>
    </div>
    <div id="novigation">
      <div id="red"></div>
      <ul id="now">
        <li>
          <a href="index.html">
            <font size="+3" face="Monotype Corsiva">Главная</font>
          </a>
          <ul>
            <li>
              <a href="login.html">
                <font size="+2" face="Monotype Corsiva">Регистрационная<br>форма</font>
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="delivery.html">
            <font size="+3" face="Monotype Corsiva">Доставка</font>
          </a>
        </li>
        <li>
          <a href="company.html">
            <font size="+3" face="Monotype Corsiva">О компании</font>
          </a>
        </li>
        <li>
          <a href="contacts.html">
            <font size="+3" face="Monotype Corsiva">Контакты</font>
          </a>
          <ul>
            <li>
              <a href="help.php">
                <font size="+3" face="Monotype Corsiva">Помощь и обратная связь</font>
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="computer.html">
            <font size="+3" face="Monotype Corsiva">Компьютеры</font>
          </a>
          <ul>
            <li>
              <a href="gaming.html">
                <font size="+3" face="Monotype Corsiva">Игровые</font>
              </a>
            </li>
            <li>
              <a href="office.html">
                <font size="+3" face="Monotype Corsiva">Офисныеa</font>
              </a>
            </li>
            <li>
              <a href="monoblocks.html">
                <font size="+3" face="Monotype Corsiva">Моноблоки</font>
              </a>
            </li>
            <li>
              <a href="laptops.html">
                <font size="+3" face="Monotype Corsiva">Ноутбуки</font>
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="assembly.html">
            <font size="+3" face="Monotype Corsiva">Сборка</font>
          </a>
          <ul>
            <li>
              <a href="frame.html">
                <font size="+3" face="Monotype Corsiva">Корпусы</font>
              </a>
            </li>
            <li>
              <a href="motherboard.html">
                <font size="+3" face="Monotype Corsiva">Материнские<br>платы</font>
              </a>
            </li>
            <li>
              <a href="cpu.html">
                <font size="+3" face="Monotype Corsiva">Процессоры</font>
              </a>
            </li>
            <li>
              <a href="power.html">
                <font size="+3" face="Monotype Corsiva">Блоки питания</font>
              </a>
            </li>
            <li>
              <a href="expension.html">
                <font size="+3" face="Monotype Corsiva">Платы расширения</font>
              </a>
            </li>
            <li>
              <a href="memory.html">
                <font size="+3" face="Monotype Corsiva">Память</font>
              </a>
            </li>
            <li>
              <a href="broadcast.html">
                <font size="+3" face="Monotype Corsiva">Трансляция</font>
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="periphery.html">
            <font size="+3" face="Monotype Corsiva">Периферия</font>
          </a>
          <ul>
            <li>
              <a href="monitors.html">
                <font size="+3" face="Monotype Corsiva">Мониторы</font>
              </a>
            </li>
            <li>
              <a href="headset.html">
                <font size="+3" face="Monotype Corsiva">Гарнитура</font>
              </a>
            </li>
            <li>
              <a href="mice.html">
                <font size="+3" face="Monotype Corsiva">Мышки</font>
              </a>
            </li>
            <li>
              <a href="keyboards.html">
                <font size="+3" face="Monotype Corsiva">Клавиатуры</font>
              </a>
            </li>
            <li>
              <a href="rugs.html">
                <font size="+3" face="Monotype Corsiva">Коврики</font>
              </a>
            </li>
            <li>
              <a href="acoustics.html">
                <font size="+3" face="Monotype Corsiva">Акустика</font>
              </a>
            </li>
            <li>
              <a href="set.html">
                <font size="+3" face="Monotype Corsiva">Комплекты</font>
              </a>
            </li>
            <li>
              <a href="routers.html">
                <font size="+3" face="Monotype Corsiva">Маршрутиза<br>торы</font>
              </a>
            </li>
            <li>
              <a href="access.html">
                <font size="+3" face="Monotype Corsiva">Точки доступа</font>
              </a>
            </li>
            <li>
              <a href="net.html">
                <font size="+3" face="Monotype Corsiva">Беспроводные сетевые адаптеры</font>
              </a>
            </li>
            <li>
              <a href="armchairs.html">
                <font size="+3" face="Monotype Corsiva">Кресла для геймеров</font>
              </a>
            </li>
            <li>
              <a href="graphic.html">
                <font size="+3" face="Monotype Corsiva">Графические планшеты</font>
              </a>
            </li>
        </li>
        </ul>
      </ul>
    </div>
    <div id="clear"></div>
    <div id="content">
      <div class="a1">
        <div class="aa1">
          <div class="text1">
            <p>
              <font size="10" face="Monotype Corsiva">Интернет магазин<br><b>Компьютеров</b></font>
            </p>
          </div>
          <div>
            <a class="qq">
              <font face="Monotype Corsiva" size="+3"><b>Подробнее</b></font>
            </a>
          </div>
        </div>
        <div class="img9"><img src="pict/img2.jpg" height="100%"></div>
        <div class="img8"><img src="pict/img3.jpg" height="100%"></div>
      </div>
      <div class="a2">
      </div>
      <div class="a3">
      </div>
      <div class="b1">
        <div class="img3"><img src="pict/img1.jpg" height="100%"></div>
        <div class="bb1">
          <div class="text2">
            <p>
              <font color="black" size="+3" face="Monotype Corsiva"><b>Игровые ПК</b></font><br>
              <font color="gray" size="+0.5" face="Monotype Corsiva">Игровой современный<br>продуктивный компьютер</font>
            </p>
          </div>
          <div>
            <a href="gaming.html" class="qx">
              <font face="Monotype Corsiva" size="+2"><b>Подробнее</b></font>
            </a>
          </div>
        </div>
      </div>
      <div class="c1">
        <div class="img3"><img src="pict/img4.jpg" height="100%"></div>
        <div class="bb1">
          <div class="text2">
            <p>
              <font color="black" size="+3" face="Monotype Corsiva"><b>Зборка ПК</b></font><br>
              <font color="gray" size="+0.5" face="Monotype Corsiva">Комплектующие для вашего ПК</font>
            </p>
          </div>
          <div>
            <a class="qx">
              <font face="Monotype Corsiva" size="+2"><b>Подробнее</b></font>
            </a>
          </div>
        </div>
      </div>
      <div class="b1">
        <div class="img3"><img src="pict/img5.jpg" height="100%"></div>
        <div class="bb1">
          <div class="text2">
            <p>
              <font color="black" size="+3" face="Monotype Corsiva"><b>Офисный компьютер</b></font><br>
              <font color="gray" size="+0.5" face="Monotype Corsiva">Офисный компьютер<br>Безналичный расчёт ПДВ</font>
            </p>
          </div>
          <div>
            <a class="qx">
              <font face="Monotype Corsiva" size="+2"><b>Подробнее</b></font>
            </a>
          </div>
        </div>
      </div>
      <div class="c1">
        <div class="img3"><img src="pict/img6.jpg" height="100%"></div>
        <div class="bb1">
          <div class="text2">
            <p>
              <font color="black" size="+3" face="Monotype Corsiva"><b>Трансляция</b></font><br>
              <font color="gray" size="+0.5" face="Monotype Corsiva">Online зборка для вашего ПК</font>
            </p>
          </div>
          <div>
            <a class="qx">
              <font face="Monotype Corsiva" size="+2"><b>Подробнее</b></font>
            </a>
          </div>
        </div>
      </div>
      <div class="d1">
        <div class="qw"><img src="pict/garantia.png" height="100%"></div>
        <div class="text3">
          <font size="+3" face="Monotype Corsiva" color="#A90808">Гарантия 720 дней<br></font>
          <font size="+0.5" face="Monotype Corsiva" color="#A90808">Максимально быстро<br>решаем проблему</font>
        </div>
      </div>
      <div class="d1">
        <div class="qw"><img src="pict/dostavka.png" height="100%"></div>
        <div class="text3">
          <font size="+3" face="Monotype Corsiva" color="#A90808">Бесплатная доставка<br></font>
          <font size="+0.5" face="Monotype Corsiva" color="#A90808">В отделение Новой почты<br>+ доставка</font>
        </div>
      </div>
      <div class="d1">
        <div class="qw"><img src="pict/%.png" height="100%"></div>
        <div class="text3">
          <font size="+3" face="Monotype Corsiva" color="#A90808">Наши скидки<br></font>
          <font size="+0.5" face="Monotype Corsiva" color="#A90808">При заказе от 3 штук<br>считается скидка</font>
        </div>
      </div>
      <div class="d1">
        <div class="qw"><img src="pict/pomosh.png" height="100%"></div>
        <div class="text3">
          <font size="+3" face="Monotype Corsiva" color="#A90808">Помощь<br></font>
          <font size="+0.5" face="Monotype Corsiva" color="#A90808">Компетентная<br>поддержка</font>
        </div>
      </div>
    </div>
    <div id="clear"></div>
    <div id="footer">
      <center>&copy;2022, Балан Денис Олегович, все права защищены</center>
    </div>
  </div>
</body>

</html>