Как нанести обертку на эту гибкую коробку и сохранить отзывчивость

Question

Я пытаюсь разместить элементы в середине 1240 пикселей на экране, используя оболочку, однако, когда я добавляю оболочку, элемент .space <li> перестает сжиматься, когда я уменьшаю страницу, делая мой вход Кнопка и кнопка выхода исчезают в правой части страницы. Также мне было интересно, является ли использование пустого <li> с flex: 1 правильным способом создания пространства между первыми 3 <li> элементами и последними 2.

.container {
    display: flex;
}
.container>li {
    padding: 10px;
    text-align: center;
    font-size: 1em;
    color: white;
    box-sizing: border-box;
    background-color: black;
    list-style-type: none;
}
.space {
    flex: 1;
}
.wrapper {
    width: 1240px;
    margin: 0 auto;
    height: 100%;
}

<nav>
    <div class='wrapper'>
        <ul class="container">
            <li>Images</li>
            <li>Albums</li>
            <li>Tags</li>
            <li class='space'></li>
            <li>Log In</li>
            <li>Sign Up</li>
        </ul>
    </div>
</nav>

Answer 1

Используйте width: 100%; до nav и wrapper

.container {
    display: flex;
}
.container>li {
    padding: 10px;
    text-align: center;
    font-size: 1em;
    color: white;
    box-sizing: border-box;
    background-color: black;
    list-style-type: none;
}
.space {
    flex: 1;
}
.wrapper {
    width: 1240px;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
nav{    
width: 100%;
}

<nav>
    <div class='wrapper'>
        <ul class="container">
            <li>Images</li>
            <li>Albums</li>
            <li>Tags</li>
            <li class='space'></li>
            <li>Log In</li>
            <li>Sign Up</li>
        </ul>
    </div>
</nav>

Answer 2

Вам нужно использовать проценты, чтобы сделать его отзывчивым. Или добавьте max-width: 100%;, если хотите сохранить width: 1240px;

.container {
    display: flex;
}
.container>li {
    padding: 10px;
    text-align: center;
    font-size: 1em;
    color: white;
    box-sizing: border-box;
    background-color: black;
    list-style-type: none;
}
.space {
    flex: 1;
}
.wrapper {
    width: 100%;
    margin: 0 auto;
    height: 100%;
}

<nav>
    <div class='wrapper'>
        <ul class="container">
            <li>Images</li>
            <li>Albums</li>
            <li>Tags</li>
            <li class='space'></li>
            <li>Log In</li>
            <li>Sign Up</li>
        </ul>
    </div>
</nav>