Utilizing flex to centrally position my element within my layers has worked well for me, but I encountered an issue when switching to a smaller screen size. The element simply scales down in size instead of taking up the full width like it does with Bootstrap's <col-md-4>. I would like to achieve a similar effect where the div expands to full width on smaller screens. I chose not to use Bootstrap because it is challenging to center three <col-md-3> divs in the middle of the page.
<div class="container">
<div>
</div>
<div>
</div>
<div>
</div>
</div>
This is what my CSS currently looks like:
.container div {
height:180px;
width:180px;
background-color:black;
margin: 15px 15px;
}