Подскажите как стилизовать контент, чтобы боксы шли один за другим
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom left text CirceReg,sans-serif, PT Sans*/
.bottom-left {
display: flex;
position: absolute;
bottom: 10px;
left: 10px;
font-size: 16px;
font-family: CirceReg;
font-weight: bold;
width: 240px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
padding: 70px 15px 40px;
}
/* Top left text */
.top-left {
position: absolute;
top: 10px;
left: 10px;
}
/* Top right text */
.top-right {
position: absolute;
top: 17px;
right: 10px;
}
/* Bottom right text */
.bottom-right {
background-color: ;
font-family: PT Sans;
font-size: 15px;
border-radius: 0.1rem;
position: absolute;
bottom: 25px;
left: 20px;
padding: 5px;
}
.bottom-right1 {
background-color: ;
border-radius: 0.1rem;
position: absolute;
bottom: 25px;
right: 20px;
padding: 5px;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#myfontprogress {
font-family: "PT Sans";
font-size: 33px;
color: #fff;
text-align: center;
margin-bottom: 12px;
text-shadow: 0 1px 5px #000;
position: relative;
}
<div id="catalog" style="position: relative;width:fit-content;margin: 40px 40px 0;">
<a href="#">
<div class="container">
<img src="https://cdnb.artstation.com/p/assets/images/images/009/952/387/large/pablo-dobarro-dev1.jpg?1521743024" width="270" height="100%" style="margin:10px;" /><br />
<div class="bottom-left">
<h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
Demo
</h4>
</div>
<div class="bottom-right">
Demo
</div>
<div class="bottom-right1">
Demo
</div>
<div class="centered">
<h1 id="myfontprogress">
Example
</h1>
</div>
<div class="top-right">
Demo
</div>
<div class="top-left">
<div class="grade grade--red" data-grade-score="">
<p class="grade__score">Demo</p>
</div>
</div>
</div>
</a>
<a href="#">
<div class="container">
<img src="https://cdnb.artstation.com/p/assets/images/images/027/457/629/large/noah-1.jpg?1591609325" width="270" height="100%" style="margin:10px;" /><br />
<div class="bottom-left">
<h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
Demo
</h4>
</div>
<div class="bottom-right">
Demo
</div>
<div class="bottom-right1">
Demo
</div>
<div class="centered">
<h1 id="myfontprogress">
Example
</h1>
</div>
<div class="top-right">
Demo
</div>
<div class="top-left">
<div class="grade grade--red" data-grade-score="">
<p class="grade__score">Demo</p>
</div>
</div>
</div>
</a>
<a href="#">
<div class="container">
<img src="https://cdna.artstation.com/p/assets/images/images/023/697/068/large/vadim-sadovski-dsc-5739-2-copy.jpg?1580068518" width="270" height="100%" style="margin:10px;" /><br />
<div class="bottom-left">
<h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
Demo
</h4>
</div>
<div class="bottom-right">
Demo
</div>
<div class="bottom-right1">
Demo
</div>
<div class="centered">
<h1 id="myfontprogress">
Example
</h1>
</div>
<div class="top-right">
Demo
</div>
<div class="top-left">
<div class="grade grade--red" data-grade-score="">
<p class="grade__score">Demo</p>
</div>
</div>
</div>
</a>
<a href="#">
<div class="container">
<img src="https://cdnb.artstation.com/p/assets/images/images/009/952/387/large/pablo-dobarro-dev1.jpg?1521743024" width="270" height="100%" style="margin:10px;" /><br />
<div class="bottom-left">
<h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
Demo
</h4>
</div>
<div class="bottom-right">
Demo
</div>
<div class="bottom-right1">
Demo
</div>
<div class="centered">
<h1 id="myfontprogress">
Example
</h1>
</div>
<div class="top-right">
Demo
</div>
<div class="top-left">
<div class="grade grade--red" data-grade-score="">
<p class="grade__score">Demo</p>
</div>
</div>
</div>
</a>
<a href="#">
<div class="container">
<img src="https://cdnb.artstation.com/p/assets/images/images/027/457/629/large/noah-1.jpg?1591609325" width="270" height="100%" style="margin:10px;" /><br />
<div class="bottom-left">
<h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
Demo
</h4>
</div>
<div class="bottom-right">
Demo
</div>
<div class="bottom-right1">
Demo
</div>
<div class="centered">
<h1 id="myfontprogress">
Example
</h1>
</div>
<div class="top-right">
Demo
</div>
<div class="top-left">
<div class="grade grade--red" data-grade-score="">
<p class="grade__score">Demo</p>
</div>
</div>
</div>
</a>
<a href="#">
<div class="container">
<img src="https://cdna.artstation.com/p/assets/images/images/023/697/068/large/vadim-sadovski-dsc-5739-2-copy.jpg?1580068518" width="270" height="100%" style="margin:10px;" /><br />
<div class="bottom-left">
<h4 style="float: left;margin: 0 0px 0;text-align: -webkit-auto;">
Demo
</h4>
</div>
<div class="bottom-right">
Demo
</div>
<div class="bottom-right1">
Demo
</div>
<div class="centered">
<h1 id="myfontprogress">
Example
</h1>
</div>
<div class="top-right">
Demo
</div>
<div class="top-left">
<div class="grade grade--red" data-grade-score="">
<p class="grade__score">Demo</p>
</div>
</div>
</div>
</a>
</div>