Div pushed from bottom of container on resize - html

Question

I have a container with multiple rows and columns inside of it built with Bootstrap. The problem I am experiencing is when the page is resized vertically the elements inside the container overflow on the bottom. Code snippets below:
HTML
<section class='container'>
<!-- Title -->
<section class='row'>
<section class='col-md-12 text-center'>
<img id='logo' src='assets/images/logo.png' alt="Futurama Logo">
<h1 id='game-title' class='page-header text-center'>Hangman</h1>
</section>
</section>
<!-- Game screen -->
<section id='game-screen' class='row'>
<section id='game-left' class='col-md-6'>
<section id='image-area'></section>
</section>
<section id='game-right' class='col-md-6 text-center'>
<section id='top-row' class='row'>
<section id='right-top' class='col-md-12 text-center'>
<h2 class='text-primary'>Press any key to get started!</h2><br><br>
<h4 id='wins'>Wins: <span id='winCount'></span></h4><br><br>
<h2>Current Word</h2>
<h3 id='word'></h3>
</section>
</section>
<section id='bottom-row' class='row'>
<section id='guesses' class='col-md-12'>
<h3>Number of guesses remaining: <span id='guessCount'></span></h3>
</section>
<section id='right-bottom' class='col-md-12'>
<h4>Letters Guessed</h4>
<section id='letters'></section>
<p class='' id='outcome'></p>
<audio id='audio' src='' autoplay="true"></audio>
</section>
</section>
</section>
</section>
CSS
html, body{
height: 100%;
}
body{
background-image: url('../images/city.jpg');
}
.container{
position: relative;
top: 20px;
height: 90%;
background-color: white;
}
#logo{
min-width:50%;
}
#game-title{
font-size: 50px;
letter-spacing: 10px;
transition: letter-spacing 2s;
}
#game-title:hover{
letter-spacing: 50px;
}
.page-header{
margin-top: 0px;
}
#game-screen{
height: 75%;
}
#game-left, #game-right{
height:100%;
}
#image-area{
background-image: url('../images/futurama.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:85%;
}
#top-row{
border-bottom: 2px solid black;
}
#top-row, #bottom-row{
height: 50%;
}
#word{
letter-spacing: 10px;
}
#guesses{
height:25%;
}
#right-bottom{
height:75%;
}
#letter{
display: inline;
margin: 10px;
font-size: 20px;
}
#outcome{
position: relative;
top: 30px;
font-size: 30px;
}
I have launched this as a Heroku app, if it is easier to discover the issue in Dev tools please use this link:
https://hangman-michael-ryan.herokuapp.com/

Answer 1

try putting overflow:hidden to your section container and it will cope all the element inside of it. hope it helps!
one last thing, you should be using div instead of section when creating elements inside of the section tag. section tag is just for grouping elements and make your code organize.
section.container{
overflow: hidden;
}