What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

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


New member
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.

Likely the relevant HTML/CSS:

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

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

<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-->

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{}.

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

All the best to you,