将居中元素延伸到一侧

Question

I have a header that is centered but I'd like the bottom border to extend all the way to the left of the screen but preserve the max-width of the header.

Example 1:
Screen width is 1400px
Header width is 1200px (starting at left: 100px, ending at left:1300px)
Border width is 1300px (starting at left:0, ending at left:1300px)

Example 2:
Screen width is 100px
Header width is 100px
Border width is 100px

Code:

<header>
    ...
</header>

header {
    max-width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid black;
}

Answer 1

Border will not work, try something like:

header {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

header::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: black;
    width: 100vw;
}