.container {
width: 90%;
margin: 0 auto;
height: 100%;
}
.projects {
margin-top: 120px;
margin-left: auto;
margin-right: auto;
}
.projects_con {
text-align: center;
}
.buttons {
margin-top: 40px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.buttons ul {
list-style: none;
display: flex;
justify-content: space-between;
}
ul .button2 {
text-decoration: none;
white-space: nowrap;
padding: 10px 20px;
border-radius: 3px;
border: 1px solid #000;
color: #8c8c8c;
}
<section class="projects">
<div class="container">
<div class="projects_con">
<div class="buttons">
<ul>
<li><a href="#" class="button2">All</a></li>
<li><a href="#" class="button2">Web Design</a></li>
<li><a href="#" class="button2">Mobile App</a></li>
<li><a href="#" class="button2">Illustration</a></li>
<li><a href="#" class="button2">Photography</a></li>
</ul>
</div>
</div>
</div>
</section>
Есть кнопочки сверстанные flexbox. При уменьшении экрана блоки останавливаются в одном месте и дальше перестают позиционироваться по центру (скриншот почему-то не получается загрузить).
Как добиться такого эффекта чтобы блоки не переставали позиционироваться по центру и соответственно первые и последние блоки вылазили за пределы экрана?
Сейчас:
Должно быть: