You’ve placed display:flex on .row01 which has only 1 child. If you want to sort .row01 you want flex to be applied on parent/container. So I made .my_cool_flex_container as parent with display:flex.
.my_cool_flex_container {
display: flex;
}
.header {
width: 100%;
height: auto;
margin: auto;
}
.header .header__center {
width: 90%;
height: 100%;
margin: auto;
}
.header .header__center .row {
width: 100%;
height: auto;
text-align: center;
}
.header .header__center .row .header__bussword-text {
font-size: 45px;
color: #353535;
padding-top: 40px;
padding-bottom: 30px;
}
.header .header__center .row01 {
width: 90%;
margin: auto;
overflow: none;
}
.header .header__center .row01 .ref__square {
width: 150px;
height: 180px;
background: #fff;
border: 1px solid #ff3b49;
position: relative;
margin: 5px;
}
.header .header__center .row01 .ref__square:nth-child(1):before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url("fluid.png") no-repeat;
background-size: 190%;
background-position: center;
opacity: .7;
}
.header .header__center .row01 .ref__square .ref__logo-container {
width: 100%;
height: 80px;
position: absolute;
top: 0;
}
.header .header__center .row01 .ref__square .ref__logo-container .ref__image {
max-width: 80%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.header .header__center .row01 .ref__square .ref__information {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.header .header__center .row01 .ref__square .ref__information .ref__link {
color: #050505;
}
.header .header__center .row01 .ref__square .ref__information .ref__code {
font-weight: 600;
}<div class="header">
<div class="header__center">
<h1>Checkout my new flex container below!</h1>
<div class="my_cool_flex_container">
<!-- Specific container -->
<a target="_blank" href="http://g4skins.com/ref/DDVX">
<div class="reflinks-column row01">
<div class="ref__square">
<div class="ref__logo-container">
<img src="g4.webp" class="ref__image">
</div>
<div class="ref__information">
<p class="ref__link">g4skins.com</p>
<p class="ref__code">Code: DDVX</p>
<p class="ref__prize">Free cash</p>
</div>
</div>
</div>
</a>
<!-- Specific container -->
<a target="_blank" href="https://csgopolygon.com">
<div class="reflinks-column row01">
<div class="ref__square">
<div class="ref__logo-container">
<img src="csgopolygon.png" class="ref__image">
</div>
<div class="ref__information">
<p class="ref__link">csgopolygon.com</p>
<p class="ref__code">Code: chudy69</p>
<p class="ref__prize">Free cash</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>