0

столкнулся с проблемой, что весь контент перемещается вправо, хотя там нет никаких объектов, прикладываю пример кода и скриншоты, как можно исправить?введите сюда описание изображения

введите сюда описание изображения

введите сюда описание изображения

body {
  background: #fff;
  padding-top: 0px;
  margin: 0px;
}

.top-navigate-border {
  display: block;
  width: 90%;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border: 1px solid #6BFF37;
  border-top-color: white;
  box-shadow: -1px 1px 2px 2px #6BFF37;
  transition: 0.4s;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.logo {
  display: block;
  position: absolute;
  margin-top: 15px;
  margin-left: 130px;
}

.nav {
  display: block;
  margin-left: 80px;
  margin-right: auto;
  width: 100%;
  max-width: 100%;
  padding-left: 90px;
  margin-top: 20px;
}

.nav li {
  display: inline-block;
  list-style-type: none;
}

.nav li .nav_btn {
  margin-right: 50px;
  width: 100px;
  border: 3px solid;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border-color: #29FF8C;
  background: none;
  transition: none;
  /* text */
  font-family: Oswald;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 32px;
  text-decoration: none;
  border-style: solid;
  color: #000000;
}

.nav li .nav_btn:hover,
.nav li .nav_btn:active {
  transition: 0.4s;
  color: #29FF8C;
  text-shadow: 0px 2px 2px rgba(41, 255, 140, 0.4);
  box-shadow: 2px 2px 1px 1px rgba(41, 255, 140, 0.4);
  mix-blend-mode: normal;
}

.nav li .nav_btn_ {
  margin-right: 150px;
  width: 100px;
  border: 3px solid;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-color: #29FF8C;
  border-left-color: #29FF8C;
  border-right-color: #29FF8C;
  border-top-color: #fff;
  background: none;
  transition: none;
  /* text */
  font-family: Oswald;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 32px;
  text-decoration: none;
  border-style: solid;
  color: #000000;
}

.nav li .nav_btn_:hover,
.nav li .nav_btn_:active {
  transition: 0.4s;
  color: #29FF8C;
  text-shadow: 0px 2px 2px rgba(41, 255, 140, 0.4);
  box-shadow: 2px 2px 1px 1px rgba(41, 255, 140, 0.4);
  mix-blend-mode: normal;
}

.nav .enter .enter_btn {
  margin-left: 300px;
  margin-right: 20px;
  color: black;
  border: none;
  border-style: none;
  background: none;
  transition: 0.4s;
  font-family: Oswald;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 32px;
  text-decoration: none;
}

.nav .enter .enter_btn:active,
.nav .enter .enter_btn:hover {
  color: #29FF8C;
  text-shadow: 1px 2px 2px rgba(41, 255, 140, 0.4);
}

.nav .reg .reg_btn {
  color: #fff;
  background: #29FF8C;
  width: 190%;
  height: 40px;
  border-radius: 15px;
  border-style: none;
  border-color: none;
  transition: 0.4s;
  font-family: Oswald;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 32px;
  text-decoration: none;
  box-shadow: 2px 2px 1px 1px rgba(41, 255, 140, 0.4);
}

.nav .reg .reg_btn:hover,
.nav .reg .reg_btn:active {
  background: #23C66E;
  box-shadow: 2px 2px 2px 2px rgba(41, 255, 140, 0.4);
}

.search_form_input {
  display: block;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
  height: 55px;
  border-radius: 20px;
  padding: 10px;
  border: 3px solid #29FF8C;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 12px;
  border-top-right-radius: 12px;
  border-top-left-radius: 20px;
  font-family: Oswald;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 32px;
  text-decoration: none;
  transition: 0.4s;
}

.search_form_input:hover {
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  border-top-left-radius: 12px;
}

.search_btn {
  display: block;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 110px;
  height: 45px;
  border-radius: 10px;
  background: #29FF8C;
  border: none;
  font-family: Oswald;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 32px;
  text-decoration: none;
  transition: 0.4s;
  color: #FFF;
}

.search_btn:hover {
  background: #FFF;
  border: 3px solid #29FF8C;
  color: black;
}

.content {
  width: 100%;
  padding-left: 80px;
}

.category_name {
  padding-left: 80px;
  display: block;
  margin-top: 80px;
  font-family: Oswald;
  font-style: normal;
  font-weight: normal;
  font-size: 28px;
  line-height: 32px;
  text-decoration: none;
}

.content .recept {
  display: inline-block;
  margin-right: 80px;
  margin-top: 80px;
  width: 230px;
  height: 420px;
  border-radius: 13px;
  border: 1px solid #6BFF37;
  box-shadow: -1px 1px 2px 2px #6BFF37;
  transition: 0.4s;
  background: linear-gradient(358.4deg, #29FF8C -49.14%, #B6FFD8 16.76%, #FFFFFF 147.1%);
}

.content .recept:hover {
  border-bottom: 3px solid #29FF8C;
  border-right: 3px solid #29FF8C;
  box-shadow: 2px 2px 2px 2px rgba(41, 255, 140, 0.4);
}

.content .recept .img_recept {
  width: 100%;
  height: 165px;
}

.content .recept .img_recept .main_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: -1px 1px 2px 2px #8FE770;
}

.content .recept .info {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
}

.content .recept .info .product-name {
  font-family: Oswald;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 25px;
  margin-left: 15px;
  margin-right: 15px;
  color: #fff;
}

.content .recept .info .time_text {
  display: inline-block;
  margin-top: 12px;
  margin-left: 15px;
  font-family: Oswald;
  font-style: normal;
  font-weight: lighter;
  font-size: 20px;
  line-height: 25px;
  margin-left: 15px;
  margin-right: 15px;
  color: #fff;
}

.content .recept .info .time_img {
  width: 20px;
  height: 20px;
  margin-right: 7px;
  display: inline-block;
}

.content .recept .info .ingridients {
  display: inline-block;
  margin-left: 15px;
  font-family: Oswald;
  font-style: normal;
  font-weight: lighter;
  font-size: 20px;
  line-height: 25px;
  margin-left: 15px;
  margin-right: 15px;
  color: #fff;
}

.content .recept .info .recept_img {
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-right: 7px;
}

.content .recept .info .author {
  margin-top: 23px;
  display: inline-block;
  margin-left: 15px;
  font-family: Oswald;
  font-style: normal;
  font-weight: lighter;
  font-size: 17px;
  line-height: 25px;
  margin-left: 15px;
  margin-right: 15px;
  color: #fff;
}

.content .recept .info .person_img {
  display: inline-block;
  height: 30px;
  width: 40px;
  margin-right: 7px;
}

.content .recept .info a .card_btns .go_to_btn {
  font-family: Oswald;
  font-style: normal;
  font-weight: lighter;
  font-size: 15px;
  line-height: 28px;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 14px;
  color: #fff;
  background: #29FF8C;
  width: 110px;
  height: 30px;
  border-style: none;
  border-color: none;
  text-decoration: none;
  background: #76DCA4;
  border-radius: 11px;
  transition: 0.4s;
}

.content .recept .info a .card_btns .go_to_btn:hover,
.content .recept .info a .card_btns .go_to_btn:active {
  background: #23C66E;
  box-shadow: 2px 2px 2px 2px rgba(41, 255, 140, 0.4);
}

.content .recept .info a .card_btns .liked_btn {
  font-family: Oswald;
  font-style: normal;
  font-weight: lighter;
  font-size: 15px;
  line-height: 28px;
  margin-left: 15px;
  margin-right: 120px;
  margin-top: 14px;
  color: #fff;
  background: #29FF8C;
  width: 30px;
  height: 30px;
  border-style: none;
  border-color: none;
  background: none;
  border-radius: 11px;
  transition: 0.4s;
}

.content .recept .info a .card_btns .go_to_btn:hover,
.content .recept .info a .card_btns .go_to_btn:active {
  box-shadow: 2px 2px 2px 2px rgba(41, 255, 140, 0.4);
}

.pagination_pages_div {
  height: 30px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 50px;
  text-align: center;
}

.pages_href {
  font-family: Oswald;
  font-style: normal;
  font-size: 20px;
  line-height: 28px;
  text-decoration: none;
  color: #23C66E;
}

.pagination {
  list-style-type: none;
  display: inline-block;
}

.footer_div {
  margin-top: 50px;
  height: 300px;
  background: #23C66E;
}
<body>
  <div class="logo"><img class="logo_img" src="images/logo.png" width="50"></div>
  <div class="top-navigate-border">
    <div class="nav">
      <li><button class="nav_btn">Рецепты</button></li>
      <li><button class="nav_btn">Избранное</button></li>
      <li><button class="nav_btn_">Создать</button></li>
      <li class="enter"><button class='enter_btn'>Вход</button></li>
      <li class="reg"><button class='reg_btn'>Регистрация</button></li>
    </div>
  </div>

  <form class="search_form">
    <input class="search_form_input" placeholder="Найти рецепт" type="search" name="search" arial-label="Найти рецепт">
    <button class="search_btn" type="submit">Найти</button>
  </form>


  <span class="category_name">Рецепты</span>

  <div class="content">

    <div class="recept">
      <div class="img_recept"><img src='images/ss.jpg' class="main_img">
        <div class='info'>
          <h4 class="product-name">Жареная курица</h4>
          <span class="time_text"><img src = "images/timer_01101101.png" class = "time_img">40 min</span><br>
          <span class="ingridients"><img src = "images/food_for_card.png" class = "recept_img">4 ingridienta</span>
          <a href="#">
            <div class="card_btns">
              <button class="go_to_btn">Смотреть</button>
            </div>
          </a>
          <span class="author"><img src = "images_/person_logo_.png" class = "person_img" width = "40px" height=""30px>Jonh Robbinson</span>
        </div>
      </div>
    </div>
  </div>
</body>

<div class="pagination_pages_div">
  <li class="pagination">
    <a href="#" class="pages_href">1</a>
    <a href="#" class="pages_href">2</a>
    <a href="#" class="pages_href">➜</a>
  </li>
</div>

<footer>
  <div class="footer_div">
  </div>
</footer>

2 ответа 2

1

У тебя проблема в том, что много секций по ширине больше, чем body. Смотри, открываешь инспектор, сдвигаешь контент вправо и смотришь какой блок вываливается: введите сюда описание изображения

Текущий блок у тебя 100% по ширине + 80px как паддинг. В таких случаях помогает box-sizing. Но в целом это плохой подход, потому что у тебя несколько элементов надо сдвигать на 80px, в адаптиве тебе будет больно это все править. Так что заведи класс wrapper и оборачивай в него все, что нужно. Паддинг должен быть с обоих сторон, так как у тебя может быть много текста или много блоков, они не должны вываливаться. Также нужно оборачивать все в семантические теги, как section, nav, header и так далее.

Обрати внимание, что у тебя не закрывается head, а body закрывается не в том месте.

Также у тебя ошибки в следующих местах: Переделай Header: не делай logo абсолютом, добавь флексы. Обводку и круглые уголки нужны всему header. Не ставь высоту 80px, используй паддинги для всего блока. Не ставь width: 100px, используй паддинги и max-width / min-width (в зависимости от того, что тебе нужно). Раздели ссылки с навигацией и ссылки для входа на 2 блока. Предусмотри, что после того, как юзер зайдет в систему, верстка не сломается (даже с очень длинным именем, для этого max-width ставь).
Не используй маргины на внутренних элементах,сделай список флексами и отступы сделаей через column-gap.

В целом, если используешь position: absolute, не используй маргины для выравнивания, свойства top/bottom/left/right. Из-за width: 190% у тебя вываливается кнопка. Сейчас я сделала width: 200px, но тебе надо сделать так, чтобы через паддинги у кнопки достигалась нужная ширина-высота.

Также добавь нормалайз, чтобы спросить ненужные паддинги/маргины. Например, чтобы вручную каждый раз не писать ul {margin: 0; padding: 0}. Разберись с флексами, никто больше не использует display: inline-block.

И удачи в дальнейшей разработке! Вижу, пока получается кое-как, но главное практика, всё наверстаешь ещё :)

body {
    background:#fff;
    padding-top: 0px;
    margin: 0px;
}
.wrapper {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding-left: 80px;
    padding-right: 80px;
    position: relative;
    width: 100%;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

header {
    border: 1px solid #6BFF37;
    border-top-color: white;
    box-shadow: -1px 1px 2px 2px #6BFF37;
    width: 90%;
    display: block;
    padding: 20px 80px;
    
    margin-left: auto;
    margin-right: auto;
    position: relative;
    box-sizing: border-box;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background: #fff;
    
    display: flex;
    flex-direction: row;
    column-gap: 80px;
}

.top-navigate-border {
    transition: 0.4s;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.logo {
}

.nav {
    margin: 0;
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    column-gap: 40px;
}


.nav_btn {
    width: 100px;
    
    border: 3px solid;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-color: #29FF8C;
    background: none;
    transition: none;
    
    
    
    /* text */
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    text-decoration: none;
    
    border-style: solid;
    color: #000000;
}

.nav_btn:hover,
.nav_btn:active {
    transition: 0.4s;
    color: #29FF8C;
    text-shadow: 0px 2px 2px rgba(41, 255, 140, 0.4);
    box-shadow: 2px 2px 1px 1px rgba(41, 255, 140, 0.4);
    mix-blend-mode: normal;
}

.nav_btn_ {
   
    width: 100px;
    
    border: 3px solid;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-color: #29FF8C;
    border-left-color: #29FF8C;
    border-right-color: #29FF8C;
    border-top-color: #fff;
    background: none;
    
    transition: none;
    
    
    
    /* text */
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    text-decoration: none;
    
    border-style: solid;
    color: #000000;
}

.nav_btn_:hover,
.nav_btn_:active {
    transition: 0.4s;
    color: #29FF8C;
    text-shadow: 0px 2px 2px rgba(41, 255, 140, 0.4);
    box-shadow: 2px 2px 1px 1px rgba(41, 255, 140, 0.4);
    mix-blend-mode: normal;
}

.auth {
  display: flex;
  flex-direction: row;
  column-gap: 20px;
}

.enter .enter_btn {
    color: black;
    border: none;
    border-style: none;
    background: none;
    transition: 0.4s;
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 32px;
    text-decoration: none;
}

.enter_btn:active,
.enter_btn:hover {
    color: #29FF8C;
    text-shadow: 1px 2px 2px rgba(41, 255, 140, 0.4);
}

.reg .reg_btn {
    color: #fff;
    background: #29FF8C;
    width: 200px;
    height: 40px;
    border-radius: 15px;
    border-style: none;
    border-color: none;
    
    transition: 0.4s;
    
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 32px;
    text-decoration: none;
    
    box-shadow: 2px 2px 1px 1px rgba(41, 255, 140, 0.4);
}


.reg .reg_btn:hover,
.reg .reg_btn:active {
    background:  #23C66E;
    box-shadow: 2px 2px 2px 2px rgba(41, 255, 140, 0.4);
}


.search_form_input {
    display: block;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    height: 55px;
    border-radius: 20px;
    padding: 10px;
    
    border: 3px solid #29FF8C;
    
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 12px;
    
    border-top-right-radius: 12px;
    border-top-left-radius: 20px;
    
    
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 32px;
    text-decoration: none;
    
    transition: 0.4s;
}
.search_form_input:hover {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 20px;
    
    border-top-right-radius: 20px;
    border-top-left-radius: 12px;
    
}

.search_btn {
    display: block;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 110px;
    height: 45px;
    border-radius: 10px;
    background: #29FF8C;
    border: none;
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 32px;
    text-decoration: none;
    transition: 0.4s;
    color: #FFF;
}

.search_btn:hover {
    background: #FFF;
    border: 3px solid #29FF8C;
    color: black;
}

.category_name {
    display: block;
    margin-top: 80px;
    font-family: Oswald;
    font-style: normal;
    font-weight: normal;
    font-size: 28px;
    line-height: 32px;
    text-decoration: none;
    
}


.content .recept {
    display: inline-block;
    margin-right: 80px;
    margin-top: 80px;
    width: 230px;
    height: 420px;
    border-radius: 13px;
    border: 1px solid #6BFF37;
    box-shadow: -1px 1px 2px 2px #6BFF37;
    transition: 0.4s;
    background: linear-gradient(358.4deg, #29FF8C -49.14%, #B6FFD8 16.76%, #FFFFFF 147.1%);
}

.content .recept:hover{
    border-bottom: 3px solid #29FF8C;
    border-right: 3px solid #29FF8C;
    box-shadow: 2px 2px 2px 2px rgba(41, 255, 140, 0.4);
}


.content .recept .img_recept {
    width: 100%;
    height: 165px;

    
}

.content .recept .img_recept .main_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    
    
    box-shadow:  -1px 1px 2px 2px #8FE770;
}

.content .recept .info {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    margin-bottom: 10px;
}

.content .recept .info .product-name {
    font-family: Oswald;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 25px;
    margin-left: 15px;
    margin-right: 15px;
    color: #fff;
}

.content .recept .info .time_text {
    display: inline-block;
    margin-top: 12px;
    margin-left: 15px;
    font-family: Oswald;
    font-style: normal;
    font-weight: lighter;
    font-size: 20px;
    line-height: 25px;
    margin-left: 15px;
    margin-right: 15px;
    color: #fff;
}

.content .recept .info .time_img {
    width: 20px;
    height: 20px;
    margin-right: 7px;
    display: inline-block;
}

.content .recept .info .ingridients {
    display: inline-block;
    margin-left: 15px;
    font-family: Oswald;
    font-style: normal;
    font-weight: lighter;
    font-size: 20px;
    line-height: 25px;
    margin-left: 15px;
    margin-right: 15px;
    color: #fff;
}

.content .recept .info .recept_img {
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-right: 7px;
}

.content .recept .info .author {
    margin-top: 23px;
    display: inline-block;
    margin-left: 15px;
    font-family: Oswald;
    font-style: normal;
    font-weight: lighter;
    font-size: 17px;
    line-height: 25px;
    margin-left: 15px;
    margin-right: 15px;
    color: #fff;
}

.content .recept .info .person_img {
    display: inline-block;
    height: 30px;
    width: 40px;
    margin-right: 7px;
}


.content .recept .info a .card_btns .go_to_btn {
    font-family: Oswald;
    font-style: normal;
    font-weight: lighter;
    font-size: 15px;
    line-height: 28px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 14px;
    
    color: #fff;
    background: #29FF8C;
    width: 110px;
    height: 30px;
    border-style: none;
    border-color: none;
    text-decoration: none;
    
    background: #76DCA4;
    border-radius: 11px;
    
    transition: 0.4s;
}

.content .recept .info a .card_btns .go_to_btn:hover,
.content .recept .info a .card_btns .go_to_btn:active {
    background:  #23C66E;
    box-shadow: 2px 2px 2px 2px rgba(41, 255, 140, 0.4);
}

.content .recept .info a .card_btns .liked_btn{
    font-family: Oswald;
    font-style: normal;
    font-weight: lighter;
    font-size: 15px;
    line-height: 28px;
    margin-left: 15px;
    margin-right: 120px;
    margin-top: 14px;
    
    color: #fff;
    background: #29FF8C;
    width: 30px;
    height: 30px;
    border-style: none;
    border-color: none;
    
    background: none;
    border-radius: 11px;
    
    transition: 0.4s;
}

.content .recept .info a .card_btns .go_to_btn:hover,
.content .recept .info a .card_btns .go_to_btn:active {

    box-shadow: 2px 2px 2px 2px rgba(41, 255, 140, 0.4);
}




.pagination_pages_div {
    height: 30px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    
    text-align: center;
}


.pages_href {
    font-family: Oswald;
    font-style: normal;
    font-size: 20px;
    line-height: 28px;
    text-decoration: none;
    color: #23C66E;
}

.pagination {
    list-style-type: none;
    display: inline-block;
    
}




.footer_div {
    margin-top: 50px;
    height: 300px;
    background: #23C66E;
}
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>НАЧАЛО РАБОТЫ С BRACKETS</title>
        <meta name="description" content="Интерактивное руководство по началу работы в Brackets.">
        <link rel="stylesheet" href="main.css">
        
    </head>
    <body>
      <header>
        <div class = "logo">
        <img class = "logo_img" src = "images/logo.png" width="50"></div>
            <div class = "top-navigate-border">
                <nav class="nav">
           
                    <button class = "nav_btn">Рецепты</button><button class = "nav_btn">Избранное</button>
                   <button class = "nav_btn_">Создать</button>
                
                </nav>
                <ul class="auth">
                <li class = "enter"><button class = 'enter_btn'>Вход</button></li>
                    <li class = "reg"><button class = 'reg_btn'>Регистрация</button></li>
                    </ul>
               
            </div>
      </header>
      <section class="search">
          <div class="wrapper">
            
                    <form class = "search_form" >
                        <input class = "search_form_input" placeholder = "Найти рецепт" type = "search" name = "search" arial-label = "Найти рецепт">
                        <button class = "search_btn" type = "submit">Найти</button>
                    </form>
            </div>
      </section>
      <section class="recepts">
          <div class="wrapper">

            <span class = "category_name">Рецепты</span>
            
            <div class = "content">
                
                <div class = "recept">
                    <div class="img_recept"><img src = 'images/ss.jpg' class="main_img">
                    <div class = 'info'>
                        
                        
                        <h4 class = "product-name">Жареная курица</h4>
                        
                        
                        
                            <span class = "time_text"><img src = "images/timer_01101101.png" class = "time_img">40 min</span><br>
                        
                        
                        
                        
                        <span class = "ingridients"><img src = "images/food_for_card.png" class = "recept_img">4 ingridienta</span>
                        
                        
                        <a href="#">
                            <div class = "card_btns">
                            <button class = "go_to_btn">Смотреть</button>
                            </div>
                        </a>
                        
                        
                        
                        <span class = "author"><img src = "images_/person_logo_.png" class = "person_img" width = "40px" height=""30px>Jonh Robbinson</span>
                    </div>
                    </div> 
            </div>
        </div>
            
    <div class = "pagination_pages_div">
        <li class = "pagination">
            <a href = "#" class = "pages_href">1</a>
            <a href = "#" class = "pages_href">2</a>
            <a href = "#" class = "pages_href">➜</a>
        </li>
    </div>
      </div>
      </section>
    
    <footer>
        <div class = "footer_div">
        </div>
    </footer>
</body>
</html>

1
  • Большое спасибо за помощь!
    – ivaivie
    4 мая 2022 в 8:39
1

Чтобы исправить, закомментировал не нужное:

    .nav {
       display: block;
       /* margin-left: 80px; */
       /* margin-right: auto; */
       width: 100%;
       /* max-width: 100%; */
       /* padding-left: 90px; */
       margin-top: 20px;
    }

    .content {
       width: 100%;
       /* padding-left: 80px; */
    }

Тогда прокрутка пропадет

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.