HTML div excess whitespace - html

Question

I have a div with an image of the world map in it, and it has map icons with text overlays placed on it. However, the border of the div is way bigger than the image, and there is no margin or padding setting that makes it like that. There is also nothing that I can see that is stretching the div border, but it still stays big. Any ideas as to why this might happen?
Any help would be appreciated
Here is the code snippet that is responsible for the Continents image:
.container {
position: absolute;
text-align: center;
color: black;
}
.centered {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.overlay {
position: relative;
bottom: -3;
background: rgb(201, 67, 67);
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity: 0;
color: white;
font-size: 15px;
padding: 10px;
text-align: center;
}
.iconImage {
display: block;
width: 100%;
height: auto;
}
<!-- Continents Picture -->
<div class="container" style="align-content: center; border: 3px solid black; padding: 0px; margin: 0%;">
<div class="centered; padding: 0%; margin: 0%;" style="border: 3px solid rgb(17, 0, 255)">
<img src="continents.png" style="width: 70%; border: 3px solid rgb(255, 0, 0)">
<!-- North America marker -->
<div class="iconContainer " style="border: 3px solid rgb(17, 0, 255); bottom: 30em; left: 28em; width: 3%;">
<img src="mapMarker.png" alt="map " class="iconImage" style="position: relative;">
<span class="overlay" style="position: relative;">North America</span>
</div>
<!-- Africa marker -->
<div class="iconContainer " style="border: 3px solid rgb(17, 0, 255); bottom: 22em; left: 58em; width: 3%;">
<img src="mapMarker.png" alt="map " class="iconImage" style="position: relative;">
<span class="overlay" style="position: relative;">Africa</span>
</div>
<!-- Europe marker -->
<div class="iconContainer " style="border: 3px solid rgb(17, 0, 255); bottom: 43em; left: 57em; width: 3%;">
<img src="mapMarker.png" alt="map " class="iconImage" style="position: relative;;">
<span class="overlay" style="position: relative;">Europe</span>
</div>
<!-- Asia marker -->
<div class="iconContainer " style="border: 3px solid rgb(17, 0, 255); bottom: 47em; left: 75em; width: 3%;">
<img src="mapMarker.png" alt="map " class="iconImage" style="position: relative;">
<span class="overlay" style="position: relative;">Asia</span>
</div>
<!-- Australia marker -->
<div class="iconContainer " style="border: 3px solid rgb(17, 0, 255); bottom: 33em; left: 85em; width: 3%;">
<img src="mapMarker.png" alt="map " class="iconImage" style="position: relative;">
<span class="overlay" style="position: relative;">Australia</span>
</div>
</div>
</div>

Answer 1

add width: min-content; and (for firefox) width: -moz-min-content; to your .container Element.