On my HTML page, I have 2 div fields. Within each field, there are 5 images listed sideways. The issue is that the images in the div below are not lining up properly side by side. Given my limited frontend knowledge, how can I align them correctly?
Here's an image of the current layout:
https://i.stack.imgur.com/kfJJ7.png
As you can see, the images are misaligned. How can I fix this alignment issue?
HTML code snippet:
@{
Layout = null;
}
<link href="~/Content/bscarousel.css" rel="stylesheet" />
<script src="~/Scripts/Home/Slider.js"></script>
<style>
.items {
display: flex;
justify-content: space-evenly;
background-color: #4C8C9E;
}
</style>
<div ng-controller="SliderController">
<div class="items">
<a href="#">
<img class="img-responsive" src="~/images/ShamanKing.jpg" style="height:130px;"/><p style="color:white; text-align:center">Shaman King</p>
</a>
<a href="#">
<br />
<img class="img-responsive" src="~/images/Limit.jpg" style="height:130px;"/><p style="color:white; text-align:center">Limit</p>
</a>
<a href="#">
<br />
<img class="img-responsive" src="~/images/DeathNote.jpg" style="height:130px;"/><p style="color:white; text-align:center">Death Note</p>
</a>
<a href="#">
<br />
<img class="img-responsive" src="~/images/SeraphoftheEnd.jpg" style="height:130px;"/><p style="color:white; text-align:center">Seraph of the End</p>
</a>
<a href="#">
<br />
<img class="img-responsive" src="~/images/OnePunchMan.jpg" style="height:130px;"/><p style="color:white; text-align:center">One-Punch Man</p>
</a>
</div>
<div style="display:flex; justify-content:space-evenly; background-color:#4C8C9E">
<a href="#">
<img class="img-responsive" src="~/images/AllYouNeedIsKill.jpg" style="height:130px;"/><p style="color:white; text-align:center">All You Need Is Kill</p>
</a>
<a href="#">
<img class="img-responsive" src="~/images/FullMetal.jpg" style="height:130px;"/><p style="color:white; text-align:center">Fullmetal Alchemist</p>
</a>
<a href="#">
<img class="img-responsive" src="~/images/VampireKnight.jpg" style="height:130px;"/><p style="color:white; text-align:center">Vampire Knight</p>
</a>
<a href="#">
<img class="img-responsive" src="~/images/RosarioVampire.jpg" style="height:130px;"/><p style="color:white; text-align:center">Rosario+Vampire</p>
</a>
<a href="#">
<img class="img-responsive" src="~/images/Gantz.jpg" style="height:130px;"/><p style="color:white; text-align:center">Gantz</p>
</a>
</div>
</div>