Исправлено расположение столбцов в CSS

Question

Как этот веб-сайт может поместить sh контент "внутрь" на страницу без полей. Мне кажется, что они имеют фиксированный макет с одним столбцом, но я не понимаю, как это сделать. Возможно, с flexbox?

Что за код CSS делает метку на скриншоте с такой маленькой шириной? Я добавил несколько красных стрелок, чтобы подчеркнуть то, что я имею в виду. В принципе, кажется, что нет никакого отступа от самой левой части браузера до метки, хотя есть что-то, что удерживает контент в центре страницы.

Answer 1

Они используют контейнер под названием widecontainer со следующим стилем

.widecontainer {
   position: relative;
   max-width: 1080px;
   margin: 0 auto;
   padding: 0 20px;
}

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

.margins-container {
    width: 85%;
    max-width: 1244px;
    margin: 0 auto 0 auto;
    @media (max-width: $tablet) {
         margin: 0 auto 20px auto;
     width: 95%;
     }
    &.no-margin {
        margin: 0 auto;
    }
    &.constrained {
        width: 85%;
    }
}

В каждом новом разделе они будут включать контейнер полей для обеспечения того, чтобы веб-сайт оставался в пределах тех же ограничений, но в то же время настраивался повсюду посредством стилизации только одного селектора.

Использование контейнера-полей, как это будет часто следуйте этому формату

<section class="main-content">
  <div class="margins-container">
    // content
  </div>
</section>
<section class="secondary-content">
  <div class="margins-container">
    // secondary content
  </div>
</section>