I'm trying to place an image in the top-center of my webpage.
I would also like it to have a 5px border.
Sounds simple enough, but there's a 4px high strip of whitespace I just can't shift.
Some help would be greatly appreciated.
Below is a screenshot of the webpage and my code in its entirety:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>marioMafia - home</title>
</head>
<body>
<div class="container" id="randomLogo">
<img src="miniMarioLogo.jpg" alt="randomLogo" style="width:100%">
</div>
<style>
#randomLogo {
position: relative;
margin-left: auto;
margin-right: auto;
max-width: 400px;
border: 5px solid #333;
}
</style>
</body>
</html>
Note: The image I used in the screenshot had a 2:1 ratio but I had the same issue with a variety of sizes and ratios
Set the vertical alignment of your image to top. E.g.
vertical-align: top;