Возникла проблема с наложением колонок на сайте при уменьшении ширины экрана

Question

Проблема в том, что при уменьшении разрешение экрана колонны накладываются рдин на друга как на картинке, Grid i @media-screen Не помогли решить проблему.

body{
    background-color: white !important;
    background-size: cover;
    background-attachment: fixed;
    font-family: Arial, Helvetica, sans-serif;
    position: relative !important;
    height:900px !important;
}
.home1{
 height: -20px;
}
.filters{
  color: aliceblue;
}
#header{
   background-color: rgb(234, 237, 240);
   height: 120px;
    color: black;
   opacity: 0.6;
}
.header b{
  text-align: center; 
  margin: 60px !important;
}
  .lefter{
    background-color: white;
  }

  .main {
    margin-left: 160px; 
    font-size: 28px; 
    padding: 0px 10px;
    opacity: 0.8;
    background-color: white;
    margin-top: 1%;
    margin-right: 1%;
    text-align: center;
    color:white;
  }

  .topnav {
    overflow: hidden;
    background-color: #333;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    background-color: black;
    color: white;
  }
  .dropbtn {
    background-color:#333;
    color: white;
    padding: 16px;
    font-size: 14px;
    border: none;
  }
 
 .navbar {
  margin-bottom: 50px;
  border-radius: 0;
}


 .jumbotron {
  margin-bottom: 0;
  opacity:0.6;
}
.Footer {
  background-color: #f2f2f2;
  height:50px !important;
  z-index: 1 !important;
  margin-top: -150px !important;
  opacity: 1 !important;
}
.headbar{
  background-color: #333;
 
}
.home{
  color:aliceblue;
}
.contacts{
  color:aliceblue;

}
.homi{
  color:aliceblue;

}

* {box-sizing: border-box;}


.sidenav {
  padding-top: 20px;
  background-color: #333;
  height: 250px;
  margin-top: 1%;
  width: 300px;
  opacity: .9;
  text-decoration: none !important;
  outline: none;
  text-align: center;
  margin-left: 0.4%;
  border-radius: 8px 8px 8px 8px;
  color:white !important;
}
.sidenav a{
  font-size: normal !important;
  text-decoration: none !important;
  outline: none;
  opacity: 1;
  color: white ;
}
.sidenav a:hover{
  font-size: normal !important;
  text-decoration: none !important;
  outline: none;
  color:teal ;
}
.sidenav a:active{
  font-size: normal !important;
  text-decoration: none !important;
  outline: none;
  color:#993300 ;
}
/*Тут контент магазина*/
.card {
  -box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  font-family: arial;
  width: 300px !important;
  padding-top: -110px !important;
 
}
.price {
  color: grey;
  font-size: 14px;
}
.row{
  box-shadow: none !important;
}
.card button {
  border: none;
  outline: 0;
  padding: 14px;
  color: aliceblue;
  background-color: #333;
  text-align: auto;
  cursor: pointer;
  width: 100% !important;
  font-size: 14px;
  background-attachment: fixed;
}

.card button:hover {
  opacity: 0.7;
  background-color: teal;
}
.column_size{
  column-count: 3 !important;
  -webkit-column-count: 3;
  margin-top: 1% !important;
  margin-right: 9% !important;
  background-color: white !important;
}
.column_1{
  margin:0;
  box-sizing:border-box;
  padding:5px;
  border:2px solid auto;
  height: 100% !important;
  background-color: white !important;
}
.column_2{
  margin:0;
  box-sizing:border-box;
  padding:5px;
  border:2px solid auto;
  margin-bottom:80px!important;
  background-color: white !important;
  padding-top: 8px !important;
}
.column_3{
  height: 100% !important;
  margin-bottom: 140px !important;
  box-sizing:border-box;
  padding:5px;
  border:2px solid auto;
  margin-top:80px!important;
  background-color: white !important;
  padding-top: 100px !important;
}
a{
  text-decoration: none !important;
}
.bty{
  color:white !important;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="pigs.js"></script>
  <title>Корми для Всіх</title>
  <link rel="stylesheet" href="pigs.css">
  <meta charset="utf-8">
</head>

<body>
  <header>
    <div class="bold">
      <div id="header">
        <div class="header">
          <b><h1>  Корми для Кролів </h1></b>
        </div>
      </div>
      <div class="home1">
        <a class="navbar-brand home" href="../../content/main.html"><i class="material-icons hmf">home</i></a>
      </div>
      <div class="headbar">
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav ">
            <li class="active"><a href="../../content/main.html" class="homi">Меню</a></li>
            <li><a class="contacts" href="../../contacts/product_13.html">Контакти</a></li>
          </ul>
        </div>
      </div>
    </div>

  </header>
  <div class="col-sm-2 sidenav">
    <p><a href="../птиця/pigs.html">Корми для Птиці</a></p>
    <p><a href="../риба/pigs.html">Корми для Риби</a></p>
    <p><a href="../свині/pigs.html">Корми для Свиней</a></p>
    <p><a href="../кролики/pigs.html">Корми для Кроликов</a></p>
    <p><a href="../крс,кози/pigs.html">Корми для Крупного Рогатого Скота</a></p>
    <p><a href="../добавки/pigs.html">Натуральні кормові добавки</a></p>
    <p><a href="../коти+собаки/pigs.html">Корм для котів і собак</a></p>
  </div>
  <div class="column_size">
    <div class="row">
      <div class="main">
        <div class="line">
          <div class="card ">
            <div class="col-3">
              <div class="border">
                <a href="К 91-1 Для молодняка кролів/product_15.html"><img src="К 91-1 Для молодняка кролів/rabbit1.jpg" alt="К 91-1 Для молодняка кролів" style="width:100%"></a>
                <p><button><a class="bty" href="К 91-1 Для молодняка кролів/product_15.html">К 91-1 Для молодняка кролів</a></button></a>
                </p>
              </div>
              <div class="border">
                <a href="К 92-2 Для дорослих кролів/product_15.html"><img src="К 92-2 Для дорослих кролів/rabbit1.jpg" alt="К 92-2 Для дорослих кролів" style="width:100%"></a>
                <p><button><a class="bty" href="К 92-2 Для дорослих кролів/product_15.html">К 92-2 Для дорослих кролів</a></button></p>
              </div>
            </div>
            <div class="col-3">
              <div class="border">
                <a href="ПК 11-3 для племенного молодняка индеек 1-9 недель/product_13.html"><img src="ПК 11-3 для племенного молодняка индеек 1-9 недель/ПК 11-3 для племенного молодняка индеек 1-9 недель.jpg" alt="ПК 11-3 для племенного молодняка индеек 1-9 недель" style="width:100%"></a>
                <p><button><a class="bty" href="ПК 11-3 для племенного молодняка индеек 1-9 недель/product_13.html">ПК 11-3 для індичок від 1-9 тижнів</a></button></p>
              </div>
              <div class="border">
                <a href="ПК 13-2 Для племінного молодняка індичок 14-17 тиж/product_13.html"><img src="ПК 13-2 Для племінного молодняка індичок 14-17 тиж/ПК 11-3 для племенного молодняка индеек 1-9 недель.jpg" alt="ПК 13-2 Для племінного молодняка індичок 14-17 тиж" style="width:100%"></a>
                <p><button><a class="bty" href="ПК 13-2 Для племінного молодняка індичок 14-17 тиж/product_13.html">ПК 13-2 Для індичок від 14-17 тижнів</a></button></p>
              </div>
              <div class="col-3">
                <div class="border">
                  <a href="ПК 90-1 Для молодняка кролів (повнораціонний)/product_15.html"><img src="ПК 90-1 Для молодняка кролів (повнораціонний)/rabbit1.jpg" alt="К 55-13 для откорма свиней весом 55-100кг" style="width:100%"></a>
                  <p><button><a class="bty" href="ПК 90-1 Для молодняка кролів (повнораціонний)/product_15.html">ПК 90-1 Для молодняка кролів</a></button></p>
                </div>
                <div class="border">
                  <a href="ПК 90-2 Для дорослих кролів (повнораціонний)/product_15.html"><img src="ПК 90-2 Для дорослих кролів (повнораціонний)/rabbit1.jpg" alt="ПК 50-0 Для поросят до 42 днів (до 10-12 кг) Предстартер" style="width:100%"></a>
                  <p><button><a class="bty" href="ПК 90-2 Для дорослих кролів (повнораціонний)/product_15.html">ПК 90-2 Для дорослих кролів</a></button></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>

</html>

после: https://i.stack.imgur.com/uvqTb.jpg

до: https://i.stack.imgur.com/EBlAP.jpg

БЛОГ НА HUSL

Возникла проблема с наложением колонок на сайте при уменьшении ширины экрана

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