I am working on adjusting my design to accommodate smaller screen sizes where elements may shift to a second line. I want these elements to align to the left instead of being centered. The image below illustrates my goal: https://i.sstatic.net/CzX5V.png
Could someone please review my code and let me know what needs to be corrected?
#teamBoxesWrapper {
position: relative;
background-color: ;
width: 1200px;
height: auto;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#teamUser {
width: 250px;
height: 250px;
background-color: ;
margin: auto;
cursor: pointer;
margin-bottom: 20px;
position: relative;
}
.teamUser4 {
background-image: url('../images/empleado4.jpg');
background-position: center center;
background-size: cover;
}<div id="teamBoxesWrapper">
<div id="teamUser" class="teamUser4">
<div id="teamUserPopup4" class="teamUserDetails">
<div id="teamUserTextAligner">
<h3 class="teamUserText1">Manuel Brenes</h3>
<hr class="userHr" />
<h3 class="teamUserText2">Graduado Social y
<br>Derechos Laborales</h3>
</div>
</div>
</div>
</div>