How to add text/images to my page without it being covered - html

Question

Building a site for it class, just want to add text and images to my pages but it's not showing, only some is shown. I want it to be underneath my title page (an image with width 100%) but I think it's either being covered by that or the navbar.
I don't really mind how it looks as long as I can know how to put as much text as I want without it being covered.
Less of the text is covered if the page is minimised, (so it's like a mobile format) but there's still a limit to how much I can put before the rest gets covered.
I've tried using div tag, I'm mostly rushing this site and have copied some of the code. (like the navbar, I just edited the colours and to make the navbar text be in the centre of the page in a horizontal alignment instead of a vertical alignment which I kept getting before.)
https://jsfiddle.net/Theo1290/vz5Lwmb8/3/
body {
background-color: rgb(22, 21, 21);
color: #FFFFFF;
}
.titlepage {
position: relative;
top: 0;
left: 0;
}
.leftarrow {
position: absolute;
bottom: 60px;
left: 80px;
}
.rightarrow {
position: absolute;
bottom: 60px;
right: 80px;
}
.navbar {
background-color: rgb(22, 21, 21);
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
display: inline-block;
text-align: center;
}
.navbar a {
color: #FFFFFF;
padding: 14px 16px;
text-decoration: none;
font-size: 30px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.active {
background-color: #4CAF50;
}
<div style="position: relative; right: 0; top: 0;">
<img src="contact.jpg" class="titlepage" style="width:100%" />
<a href="aboutpage.htm">
<img src="leftarrow.gif" class="leftarrow" style="width:157.5px;height:91.5px" />
</a>
<a href="homepage.htm">
<img src="rightarrow.gif" class="rightarrow" style="width:157.5px;height:91.5px" />
</a>
</div>
<div>
<p> something
</p>
</div>
<div class="navbar">
Home
Primary Data
Secondary Data
About
<a class="active" href="contactpage.htm">Contact</a>

Answer 1

You can use this code
body {
background-color: rgb(22, 21, 21);
color: #FFFFFF;
margin: 0;
}
.titlepage {
position: relative;
top: 0;
left: 0;
}
.leftarrow {
position: absolute;
bottom: 60px;
left: 80px;
}
.rightarrow {
position: absolute;
bottom: 60px;
right: 80px;
}
.navbar {
background-color: rgb(22, 21, 21);
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
display: inline-block;
text-align: center;
}
.navbar a {
color: #FFFFFF;
padding: 14px 16px;
text-decoration: none;
font-size: 30px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.active {
background-color: #4CAF50;
}
<div style="position: relative; right: 0; top: 0;">
<img src="https://images.taboola.com/taboola/image/fetch/f_jpg%2Cq_auto%2Ch_300%2Cw_600%2Cc_fill%2Cg_faces:auto%2Ce_sharpen/http%3A//www.relocationtarget.com/wp-content/uploads/2019/05/Hyundai_Atos_front_20080328.jpg" class="titlepage" style="width:100%" />
<a href="aboutpage.htm">
<img src="https://img.icons8.com/flat_round/64/000000/wide-long-left-arrow.png" class="leftarrow" style="width: auto; height: auto;" />
</a>
<a href="homepage.htm">
<img src="https://img.icons8.com/flat_round/64/000000/wide-long-right-arrow.png" class="rightarrow" style="width: auto; height: auto;" />
</a>
</div>
<div>
<p>something</p>
</div>
<div class="navbar">
Home
Primary Data
Secondary Data
About
<a class="active" href="contactpage.htm">Contact</a>
</div>