When my flexbox shifts into a column layout at 600 pixels, the list in the second box loses its center alignment on smaller screens. Despite trying various margin and padding adjustments within and outside of media queries, the content remains too far to the right. Even when changing the width, it appears stuck to the left side. How can I resolve this issue?
/* FLEXBOX */
.flexbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.box {
padding: 5px;
}
/* Table and Cell for Vertical Alignment */
.table {
display: table;
}
.cell {
display: table-cell;
vertical-align: middle;
}
/* SHOWCASE */
#showcase {
background-color: #1d2120;
height: 100vh;
width: 100%;
display: table;
}
#showcase h1 {
padding-top: 0px;
font-family: Ubuntu;
font-size: 4em;
color: #da5d61;
}
#showcase h2 {
color: #bcd5d1;
font-family: Cairo;
font-size: 2em;
margin: 0 0 20px;
}
#showcase h3 {
color: #ba9077;
font-family: Cairo;
font-size: 1em;
}
#inline {
font-size: 3em;
}
#inline li {
font-size: 1.5em;
padding: 0 10px 0 10px;
}
@media screen and (max-width: 610px) {
.flexbox {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
}
#contact .container {
width: 60%;
}
}<!-- SHOWCASE -->
<header id="showcase">
<div class="cell">
<div class="flexbox">
<div class="box text-center">
<h1 class="text animated pulse">Ellis Smith</h1>
<h2><i class="fa fa-pencil" aria-hidden="true"></i> Copywriter</h2>
<h3>Quality copy, never copied.</h3>
</div>
<nav class="box">
<ul>
<li>
<a href="#services">Services</a></li>
<li>
<a href="#testimonials-placeholder">Testimonials</a>
<li>
<a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>