justify-content: center not working on flex:100% in mobile - html

Question

I'm trying to build a 3 by 3 flexbox grid of button links that are responsive. The grid looks great on desktop and tablet, however, in the mobile version the items are left aligned and are unable to be horizontally centered. My goal is to get one column for the mobile with all the content centered. I switched to flex: 100%; for the mobile version and tried using justify-content: center, but it doesn't work and I'm not sure why.
#love_button,
#additude_button,
#isnpr_button,
#functional_medicine_button,
#immh_button {
width: 178px;
height: 111px;
display: block;
background-repeat: no-repeat;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
border: 4px solid orange;
}
.flex-item {
width: 178px;
height: 111px;
flex: 33.3% 33.3% 33.3%;
margin-bottom: 65px;
background: royalblue;
}
Mobile Media Query #media only screen and (max-device-width: 640px) {
/* Fixes bottom gap between resource link and footer mobile */
.push {
margin-bottom: 0;
}
.flex-container {
justify-content: center;
}
.flex-item {
flex: 100%;
}
#hide {
display: none;
}
}
<main>
<section id="resources">
<h1 class="resources_header">RESOURCES</h1>
<div class="flex-container">
</div>
<div class="flex-container push">
</div>
</section>
</main>

Answer 1

Instead try changing display:block and margin:10px auto in the media query.
Please check my snippet, and let me know if you have any questions.
#love_button,
#additude_button,
#isnpr_button,
#functional_medicine_button,
#immh_button {
width: 178px;
height: 111px;
display: block;
background-repeat: no-repeat;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-evenly;
}
.flex-item {
width: 178px;
height: 111px;
flex: 33.3% 33.3% 33.3%;
margin-bottom: 65px;
border: 1px solid red;
background: green;
}
#media only screen and (max-width: 640px) {
/* Fixes bottom gap between resource link and footer mobile */
.push {
margin-bottom: 0;
}
.flex-container {
display: block;
margin: auto;
}
.flex-item {
margin: 10px auto;
}
#hide {
display: none;
}
}
<main>
<section id="resources">
<h1 class="resources_header">RESOURCES</h1>
<div class="flex-container">
</div>
<div class="flex-container push">
</div>
</section>
</main>

Answer 2

Use align-items: center or align-content: space-evenly or both.
Without align-items or align-content
.flex-container {
width: 150px;
height: 150px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: space-evenly;
}
.flex-children {
width: 40px;
height: 40px;
background-color: red;
}
<div class="flex-container">
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
</div>
With align-items or align-content
.flex-container {
width: 150px;
height: 150px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.flex-children {
width: 40px;
height: 40px;
background-color: red;
}
<div class="flex-container">
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
<div class="flex-children"></div>
</div>
CSS-tricks: align-items
CSS-tricks: align-content