Как сделать так, чтобы заголовок занимал всю ширину веб-страницы с помощью display: flex; и flex-direction: столбец в теле?

Question

https://codepen.io/Vedang_0411/pen/mdPdjjW

Это мой первый вопрос о переполнении стека. Я знаю, что это глупый вопрос, но это первый раз, поэтому, пожалуйста, ответьте мне.

Here is the css code only.
     *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    body{
        display: flex;
        flex-direction: column;
    }
    #header{
        background-color: cyan;
        border: 1px inset black;
        display: flex;
        align-items: center;
        margin: 0 auto;
    }
    #header ul{
        list-style: none;
        display: flex;
        padding: 10px;
    }
    #header a{
        text-decoration: none;
        padding: 5px;
    }
    #heading{
        font-size: 25px;
        margin: 0 auto;
    }
    #left-content ul{
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        background-color: yellow;
    }
    #left-content a{
        text-decoration: none;
    }
    #right-content{
        background-color: #f04e0f;
    }

Я хочу, чтобы часть заголовка, т. используя display: flex; и flex-direction: column property ...

Я не понимаю, что делать, пожалуйста, посоветуйте мне. Заранее спасибо.

Answer 1

Замените #header на это:

#header{
    background-color: cyan;
    border: 1px inset black;
    display: flex;
    align-items: center;
    width: 100vw;
}

Таким образом, ваш заголовок заполнит 100% ширины просмотра.

Answer 2

Добавление width:100% к #header или удаление margin: 0 auto; из него сделает трюк.

Прямо сейчас вы сообщаете этому элементу, что хотите, чтобы он был в центре с помощью margin: 0 auto;.