Place divs one below the other [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to place my banner divs one below the other. I tried using different combinations of display and position properties but it doesnt work. They are displaying on top of each other.I want my output as firstly the banner,then below it the row of images and below the row the second banner.
.row div:first-child {
margin-left: 0;
}
.row div {
display: inline-block;
margin-left: 5%;
}
.row div img {
max-width: 100%;
max-height: 100%;
}
.row div a {
word-wrap: break-word;
text-decoration: none;
color: #515150;
}
.row div a:hover,
.row div img:hover {
color: black;
}
.img-container {
display: inline-block;
float: left;
padding-top: 40px;
padding-bottom: 20px;
text-align: center;
width: 150px;
}
.banner {
padding-top: 20px;
border-bottom: 2px solid black;
margin-left: 5%;
color: black;
font-size: 20px;
}
<div class="banner">
<h3>TOP SELLING</h3>
<div class="row">
<div class="img-container">
<a href="#">
<img src="martial.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="bvb.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="ars.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="lewandowski1.png">
</a>
</div>
</div>
</div>
<div class="banner">
<h3>TOP SELLING</h3>
<div class="row">
<div class="img-container">
<a href="#">
<img src="martial.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="bvb.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="ars.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="lewandowski1.png">
</a>
</div>
</div>
</div>
PS: I also tried using different ids for the banners but it doesnt work.

Answer 1

Either add .banner {clear:both} or remove the unnecessary float from .img-container (the display:inline-block already does that job.)