Aligning flex items to row difficult in my code

Question

Please i have tried all possible means to align my .shirt-box to row but it has proved abortive. My code is below. thanks for your unusual assistance. I have tried several answers here but they have also proved abortive. Any help will be greatly appreciated.

 .shirt-box { -ms-flex: 0 0 300px; flex: 0 0 300px; height: 300px; background-image: url("Blue_Tshirt.jpg"); background-size: cover; cursor: pointer; /*margin: 0 auto;*/ /*margin: 0 40px;*/ /*float: left;*/ /*display: inline-block;*/ border-radius: 5px; position: relative; -webkit-box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.75); -moz-box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.75); box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.75); } .shirt-box:hover { transform: translateY(-3px); } .container-flex { display: flex; flex-flow:row wrap; align-items: center; justify-content:space-around; } body { font-family: 'Dosis', sans-serif; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Dosis:300,400,600,700,800" rel="stylesheet"> <section class="centerpage"> <div class="container-fluid"> <div class="row container-flex"> <div class="col shirt-box"> </div> </div> </div> <div class="container-fluid"> <div class="row container-flex"> <div class="col shirt-box"> </div> </div> </div> </section>

Answer 1

Change your html like as shown below. Remove the extra container and row divs

 .shirt-box { -ms-flex: 0 0 300px; flex: 0 0 300px; height: 300px; background-image: url("Blue_Tshirt.jpg"); background-size: cover; cursor: pointer; /*margin: 0 auto;*/ /*margin: 0 40px;*/ /*float: left;*/ /*display: inline-block;*/ border-radius: 5px; position: relative; -webkit-box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.75); -moz-box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.75); box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.75); } .shirt-box:hover { transform: translateY(-3px); } .container-flex { display: flex; flex-flow:row wrap; align-items: center; justify-content:space-around; } body { font-family: 'Dosis', sans-serif; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Dosis:300,400,600,700,800" rel="stylesheet"> <section class="centerpage"> <div class="container-fluid"> <div class="row container-flex"> <div class="col shirt-box"> sdfsdfs sdf sdf sdf sdf sdf </div> <div class="col shirt-box"> sdfsdfs sdf sdf sdf sdf sdf </div> </div> </div> </section>