Scroll without content; text flows beyond div/div height not 100%

[SilverC3ll]

Hello everyone,

I am yet a beginner in HTML/CSS, and hope to ask more seasoned users of these languages for their input. My issue is probably easy to resolve, but difficult from a neophyte's perspective.

Page scrolls without content
For some reason, my page summons a scrollbar even though not enough content is present.

• HTML: https://spiritualnovels.net/test/index.html
• CSS: https://spiritualnovels.net/test/stylesheet.css
• JSFiddle: https://jsfiddle.net/14fq9bhe/1/

Likely the relevant HTML/CSS:

CSS:

main {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

.mainContent {
text-align:
center;width: 70%;
height: 100%;
background-color: #fff;
opacity: 0.7;
display: flex;
flex-direction: column;
justify-content:flex-start;
align-items: center;padding-top: 50px;
}

HTML:

<main>
<div class="mainContent"> <!--OPEN DIV #1-->

<!--OPEN Logo and Title H1 -->
<img src="./img/logoResizedNoBG.png"> <h1>spiritualnovels.net</h1> <!--CLOSE Logo and Title H1 -->   

<!--OPEN Menu-->   
<ul class="menu"> 
<li><a href="#">Publications</a></li> 
<li><a href="#">Author</a></li> 
<li><a href="#">Video</a></li> 
<li><a href="#">Contact</a></li> </ul> 
<!--CLOSE Menu-->

</div> <!--CLOSE DIV #1-->
</main>

Div does not maintain 100% height; text overflows
Either main{} and/or .mainContent{} does not maintain 100% height, with content text overflowing at the bottom of either main{} and/or mainContent{}.

• HTML (structure same as above, but with more content): https://spiritualnovels.net/test/author.htm
• CSS (same as above): https://spiritualnovels.net/test/stylesheet.css
• JSFiddle: https://jsfiddle.net/f0y9Lak2/1/

I'd be most grateful for any insight you can offer.

All the best to you,

SilverC3ll