Im not sure why but I cant seem to get this footer to go properly to the bottom, my body seems to only be going halfway up the page? I wrapped the whole thing in main to see if that would fix it if I set a height on that, it seemingly only goes the same height every single time. Its like its not catching the viewport or something and causing it to only go about half way up. Also please be easy im a new coder so if your awnser has just general advice to improve im all about it. Thanks ahead of time!
h1 {
font-family: 'Dancing Script', cursive;
text-align: center;
font-size: 4vmin;
}
p {
text-align: center;
font-size: 3vmin;
}
li {
font-size: 3vmin;
}
header {
text-align: center;
height: auto;
width: auto;
background-color: white;
box-shadow: 2px 2px 2px 1px gray;
margin-bottom: 2%;
margin-right: 1%;
}
#main {
position: relative;
min-height: 100vh;
}
#img-div {
display: flex;
margin: auto;
justify-content: center;
flex-direction: column;
background-color: white;
box-shadow: 0px 1px 2px 5px gray;
max-width: 100vw;
max-height: 100vh;
}
#image {
box-shadow: 0px 1px 3px 5px gray;
max-width: 70%;
margin-left: 15%;
margin-top: 1%;
}
#tribute-info {
max-width: 100vw;
max-height: 100vh;
}
#young {
background-color: white;
box-shadow: 0px 1px 3px 5px gray;
}
#youngteddy {
width: 85%;
margin-left: 7%;
box-shadow: 0px 1px 3px 5px gray;
}
#prior {
max-width: 100vw;
max-height: 100vh;
box-shadow: 0px 1px 3px 5px gray;
background-color: white;
}
#priorimg {
max-width: 70%;
margin-left: 15%;
box-shadow: 0px 1px 3px 5px gray;
}
#pres {
max-width: 100vw;
max-height: 100vh;
background-color: white;
box-shadow: 0px 1px 3px 5px gray;
}
#president {
max-width: 40%;
margin-left: 30%;
box-shadow: 0px 1px 3px 5px gray;
}
#end {
max-width: 100vw;
max-height: 100vh;
margin-top: 10%;
box-shadow: 0px 1px 3px 5px gray;
background-color: white;
}
#endimg {
max-width: 100%;
margin-left: 20%;
box-shadow: 0px 1px 3px 5px gray;
}<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap" rel="stylesheet">
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!-- Link to FCC Tester In top Left -->
<header>
<h1 id='title'>President Theodore "Teddy" Roosevelt </h1>
<p>"Walk softly, and carry a big stick"</p>
</header>
<body>
<div id='main'>
<div id='img-div'>
<img id='image' src='https://www.buddenbrooks.com/pictures/70094_1.jpg?v=1593026042' alt='Theodore after hunting a cheetah'>
<p id='img-caption'>Theodore Roosevelt kneeling in front of a cheetah</p>
</div>
<div id='tribute-info'>
<div id='young'>
<h1>
<B>Teddy's Youth</B>
</h1>
<img id='youngteddy' src='https://image.pbs.org/video-assets/pbs/roosevelts/142017/images/mezzanine_487.jpg.crop.1920x1080.jpg' alt='Theodore Roosevelt as a young child'>
<ul id=y list>
<li><b>1858</b>: Theodore was Born to Martha and Bulloch Roosevelt</li>
<li><b>1870</b>: Begins a physical regime that he continues throuout his life.
<li><b>1876</b>: Begins study at Harvard University</li>
<li><b>1878</b>: Meets his first wife, Alice Hathaway Lee
<li><b>1880</b>: Graduates Harvard Magna Cum Laude, and joins the Republican Party</li>
</div>
<div id='prior'>
<h1>Prior to his Presidency</h1>
<img id='priorimg' src='https://publicradio1-wpengine.netdna-ssl.com/newscut/files/2015/07/roosevelt.jpg' alt='President Theodore Roosevelt during his time as a RuffRider standing beside his horse'>
<ul>
<li><b>1882</b>: Publishes first major literary work, 'The Naval War of 1812'</li>
<li><b>1884</b>: Mother and Wife die of illness</li>
<li><b>1888</b>: Publishes several books, including Life of Gouverneur Morris, Ranch Life and the Hunting Trail, and Essays in Practical Politics</li>
<li><b>1889</b>: Starts as U.S. Civil Service Commissioner in Washington, DC</li>
<li><b> 1895</b> Reigns from Civil Service to become Police Commisioner of New York.</li>
<li><b>1897</b>: Appointed Assistant Seceratary of the Navy by William Mckinley</li>
<li><b>1898</b>: Forms the 'Rough-Riders' and serves as a Colonel in Cuba during the Spanish-American War</li>
</ul>
</div>
<div id='pres'>
<h1>Becoming President Theodore Roosevelt</h1>
<img id='president' src='https://upload.wikimedia.org/wikipedia/commons/d/df/Theodore_Roosevelt_circa_1902.jpg' alt='President Theodore Roosevelt'>
<ul>
<li><b>1901</b>: Serves as Vice President from March to September</li>
<li><b>1901</b>: Becomes President in September, the youngest president ever.</li>
<li><b>1902</b>: Begins anti-trust lawsuits to dissolve 42 monopolies</li>
<li><b>1903</b>: Establishes Pelican Island, FL as first federal bird reserve and Begins building Panama Canal</li>
<li><b>1904</b>:Re-elected president, established United States Forest Service</li>
<li><b>1905</b>:Establishes Wichita Forest, OK as first federal game preserve. Establishes Russo-Japaneese Peace Treaty</li>
<li><b>1906</b>: Established many national parks. Visited Panama Canal, becoming the first president to do so. Won the Nobel Peace Prize.</li>
</ul>
</div>
<div id='end'>
<h1>End of an era</h1>
<img id='endimg' src='https://allthatsinteresting.com/wordpress/wp-content/uploads/2016/10/pointing.jpg' alt='Theodore Roosevelt giving a speech after just being shot'>
<ul>
<li><b>1909</b>: End of his Presidency. Departs for year-long African safari with son Kermit</li>
<li><b>1910</b>: Accepts Peace Prize in Norway. Publlishes "African Game Trails", and returns to New York from travels around the globe.</li>
<li><b>1912</b>:Pressured to accept Presidental nomination. Becomes presidential cantidate of the "Bull Moose" or Progressive party. Deliveres famous speech despite being shot in the chest before it.</li>
<li><b>1913</b>: Publishes "Theodore Roosevelt - An Autobiography and History as Literature and Other Essays"</li>
<li><b>1914</b>:Embarks on an expedition to explore an uncharted tributary of Amazon River, which he nearly dies during. Publishes two books named "Through the Brazilian Wilderness" and "Life Histories of African Game Animals"</li>
<li><b>1918</b>: Publishes "The Great Adventure".</li>
<li><b>1919</b>: Dies in sleep at Sagamore Hill of a coronary embolism (arterial blood clot), age 60</li>
</ul>
</div>
</div>
<footer>
<div id='tlink-container'>
<p>Intrested in learning more about the Bull-Moose?
<a id='tribute-link' target="_blank" href='https://www.britannica.com/biography/Theodore-Roosevelt'>Click here</a>
</div>
</footer>
</div>