How to fix blank space at the bottom of HTML web page? - html

Question

I'm new to coding and have spent days trying to figure out how to get rid of this blank space at the bottom of my web page.
I've put my CSS code through a CSS corrector online, put red borders around all elements to try and identify elements that might be creating large borders or paddings, changed the height and width of the HTML & body elements - to no avail. Alternatively, I've tried changing the 'px' value for my map (as it is a large number and it might be pushing everything further down), but can't seem to achieve the position I want, when I do so.                                         
Attached is all my CSS:
html, body {
background-color: #222909;
font-family: "Comic Sans MS", cursive, sans-serif;
color: yellow;
}
/* Here I have created a class to apply a solid, round and yellow border around all my frog images. As I
wanted the images to be consistent with the rest of the web page design. */
.Frog_Blog_Border {
border-style: solid;
border-color: yellow;
border-radius: 50%;
}
/* Here the style and position of the Frog Blog header is determined. I decided I wanted the header to be
centered so used the'diplay', 'margin-left' and 'margin-right' option to do so. Again, I chose the map font. I wanted the border
to stand out, so created a solid and rounded yellow border around it using the 'border' options in CSS. */
.Frog_Blog_Header {
display: block;
margin-left: auto;
margin-right: auto;
width: 904px;
height: 150px;
border-style: solid;
border-color: yellow;
border-radius: 5px;
position: relative;
}
/* Here the style and position of the map div is determined using an ID selector. I decided I wanted to fit images around
my map, so resized the map and used 'diplay', 'margin-left' and 'margin-right' to centre it. Again, I chose the map font
to be 'Comic Sans MS' for consistency, the font to be bold to stand out and font size to be 16pt. I wanted the map to stand
out, so created a solid and rounded yellow border around it using the 'border' options in CSS. */
#map {
width: 600px;
height: 500px;
font-family: "Comic Sans MS", cursive, sans-serif;
font-weight: bold;
font-size: 16px;
display: block;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: yellow;
border-radius: 5px;
position: relative; /* Here I wanted to position my map so that it was below the header and text of the page, so used the
'position' option set to 'relative' to move the image around the page. */
bottom: 1105px; /* 'bottom' here refers to how far from the bottom in pixels the image was moved. */
left: 5px;
}
/* Here, I am styling the text for the map legend, which is taking the same properties of being yellow, bold and 'Comic
Sans MS from the body and html styling above, but adding some padding and alignment to it, so that the accompanying legend colour
scale does not overlap with the text. */
.legend {
font-size: small;
padding-top: 10px;
text-align: left;
line-height: 18px;
position: relative; /* Here I am using the 'position' option set to 'relative' to move the image left and from the bottom, up
the page. */
bottom: 1100px;
left: 325px;
}
/* Here I am styling the legend colour scale, adding alignment and margins to ensure it doesn't overlap with the text. */
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
}
.Yellow_Eyed_Frog_Caption {
position: relative;
left: 35px;
}
.Agalychnis_Annae{
position: relative;
}
.Black_Eyed_Frog_Caption {
position: relative;
left: 45px;
}
/* This is positioning the second frog image. */
.Agalychnis_Moreletii {
position: relative;
top: 2px;
}
.Lemur_Leaf_Frog_Caption {
position: relative;
bottom: 560px;
left: 950px;
}
/* This is positioning the third frog image. */
.Lemur_Leaf_Frog {
position: relative;
bottom: 560px;
left: 950px;
}
.Lemur_Leaf_Frog_2_Caption {
position: relative;
bottom: 560px;
left: 950px;
}
/* This is positioning the fourth frog image. */
.Lemur_Leaf_Frog_2 {
position: relative;
bottom: 565px;
left: 950px;
width: 300px;
height: 200px;
}
/* This is positioning the source link for the Frog Blog header below the main Frog Blog header image. */
.Image_Source {
position: relative;
left: 860px;
}
/* This is positioning the from image source link found below the third frog image. */
.Image_Source_2 {
position: relative;
left: 40px;
top: 610px;
}
/* This is positioning the tile source link found below the third frog image. */
.Tile_Source {
position: relative;
left: 40px;
top: 607px;
}