проблема смещения контента вправо

Question

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

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>

Answer 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; */
    }

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

Answer 2

У тебя проблема в том, что много секций по ширине больше, чем 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>

БЛОГ НА HUSL

проблема смещения контента вправо

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