CSS 中的固定列布局

Question

How is this website able to push the content "inward" into the page with no margin. It appears to me as they have a single column fixed layout, but I don't understand how this is done. Perhaps with flexbox?

What's the CSS code that makes the label in the screenshot with such a small width? I've added some red arrows to highlight what I mean. Basically there seems to be no margin that from the leftmost part of the browser to the label, though there is something that holds the content in the center of the page.

Answer 1

They use a container called widecontainer with the following style

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

This is common practise in websites, I use a margins-container in my websites with the following code

.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%;
    }
}

In each new section, they will include the margins container to ensure the website stays within the same constraints, but at the same time is adjustable throughout through styling just one selector.

Using a margins-container like this will often follow this format

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