🎨 CSS -

Full Width Bars

Creating containers that go full width of the page.

html,
body {
    overflow-x: hidden;
    margin: 0;
}
.container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.full-width {
    position: relative;
    background: black; /* Same color. */
    color: white;
}
.full-width:before,
.full-width:after {
    content: "";
    position: absolute;
    background: black;  /* Same color. */
    top: 0;
    bottom: 0;
    width: 9999px;
}
.full-width:before {
    right: 100%;
}
.full-width:after {
    left: 100%;
}

<section class="container">
    <h2>Header</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Donec aliquam velit vel nulla mollis, ac cursus est gravida.
        Vivamus quis tincidunt sem, vel rhoncus risus.
        Maecenas eleifend eget magna eget porta.
        Etiam posuere, diam nec aliquet iaculis, lectus sem ultricies
        mauris, eget mollis lorem odio in libero. Duis elementum eros
        diam, in elementum neque bibendum at. Suspendisse ac leo vitae
        libero convallis tristique. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean
        ultricies dictum nisl, nec elementum neque adipiscing et. Curabitur
        et dapibus risus. Ut non lacus a urna fringilla accumsan vel vel orci.
        Sed sodales pretium egestas.
    </p>
    <h2 class="full-width">Header</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Donec aliquam velit vel nulla mollis, ac cursus est gravida.
        Vivamus quis tincidunt sem, vel rhoncus risus.
        Maecenas eleifend eget magna eget porta.
        Etiam posuere, diam nec aliquet iaculis, lectus sem ultricies
        mauris, eget mollis lorem odio in libero. Duis elementum eros
        diam, in elementum neque bibendum at. Suspendisse ac leo vitae
        libero convallis tristique. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean
        ultricies dictum nisl, nec elementum neque adipiscing et. Curabitur
        et dapibus risus. Ut non lacus a urna fringilla accumsan vel vel orci.
        Sed sodales pretium egestas.
    </p>
</section>