I've been looking to include some buttons on the website I'm currently developing, each one leading to a different page. I decided to use images and insert hyperlinks to them, aligning them with floats. Although, it seems that something is off with the positioning, possibly due to the text alignment since I am still relatively new to HTML and CSS. The issue appears here: the last button from the left is misaligned
Here is the code snippet of my HTML:
* {
box-sizing: border-box;
}
body {
background: url('realheckindoggopupper.png')
}
div {
padding: 5px;
background-color: black;
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 1px;
}
.row::after {
content: "";
clear: both;
display: table;
}<div>
<body style="background-color:black">
<h1 style="color:blue;text-size:50px;">Welcome to the Mamiya Mansion!</h1>
<p style="color:white;">
This is a place where I put all my thoughts. I talk about all my different interests here, from retrogaming, to retro-anime, linguistics, and philosophy. I don't have much here yet, more is on the way (including better CSS!), <br> but these buttons
will allow you to access different parts I'm working on. </br>
</p>
</div>
<div class="row">
<div class="column">
<a href="retrostuff.html">
<img src="retrostuff.png" style="width:100%;">
</a>
</div>
<div class="column">
<a href="creations.html">
<img src="creations.png" style="width:100%;">
</a>
</div>
<div class="column">
<a href="pseudstuff.html">
<img src="pseudstuff.png" style="width:100%;">
</a>
<div class="column">
<a href="misc.html">
<img src="misc.png" style="width:200%;">
</a>
</div>
</div>