My HTML content flows beyond the container - html

Question

I am finishing up a site for my church and I am having trouble figuring out how to keep my section content inside of the container. It overflows down beyond the footer. I am not very experienced with CSS so I'm not sure where the problem is. I have tried making adjustments to the display type of the section. I already have overflow: hidden included. I'm not sure where the problem is, beyond my inexperience, that is. I know my limits are surpassed with this project for sure. I just want to help my church out with this and finish it up. Any help is appreciated greatly.
nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover:not(.active) {
background-color: #000;
}
.active {
background-color: #840D55;
}
header {
background-color: #840D55;
position: absolute;
top: 47px;
width: 100%;
border-bottom: solid;
border-bottom-color: #840D55;
}
header img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
#container {
height: 100%;
width: 100%;
margin-right: auto;
}
#wrapper {
position: absolute;
top: 0;
height: 100%;
width: 100%;
border-left: solid;
border-right: solid;
border-left-color: #333;
border-right-color: #333;
}
section {
height: auto;
width: auto;
color: #333;
position: relative;
top: 310px;
padding-left: 20px;
}
h1 {
position: relative;
top: 240px;
color: #333;
margin-left: 20px;
padding: 0;
text-align: center;
}
h2 {
color: #333;
}
h3 {
color: #333;
}
p {
line-height: 1.5;
}
.floatLeft {
padding-left: 40px;
width: 50%;
position: relative;
float: left;
margin: auto;
line-height: 1.8;
}
.floatRight {
width: 38%;
position: relative;
float: left;
margin: auto;
text-align: right;
padding-right: 20px;
line-height: 1.8;
}
#schAlign {
padding-right: 20px;
}
footer {
clear: both;
position: absolute;
bottom: 0px;
color: #777;
width: 100%;
background-color: #840D55;
}
<div id="wrapper">
<div id="container">
<nav>
<a class="active" href="">Home</a>
About
Pastors
Contact
</nav>
<header>
<img src="Images/bannerImg.jpg" alt="Flame of Fire Church">
</header>
<h1>In the name of Jesus, come and be blessed.</h1>
<section>
<div class="floatLeft">
<h3>Acts chapter 2 verse 38 says</h3>
<blockquote>Peter replied, "Repent and be baptized, every one of you, in the name of Jesus Christ for the forgiveness of your sins. <strong><em>And you will receive the gift of the <u>Holy Spirit</u>.</strong></em>"</blockquote>
<br />
<h3>Verse 39 continues</h3>
<blockquote>"The promise is for you and your children and for all who are far off - for all whom the Lord our God will call."</blockquote>
<br />
<p></p>
</div>
<div class="floatRight">
<h2>Service Schedule</h2>
<div id="schAlign">
<p>Wednesday Night</p>
<ul>
<li>7:00PM</li>
</ul>
<p>Sunday Morning</p>
<ul>
<li>10:00AM</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<!-- This site built with love and joy by Keith Graham -->
© Flame of Fire Church, 2017. All rights reserved.
</footer>
</div>

Answer 1

Updated styles (without positioning - it seems you don't need it here - and other bloat). Use margins to set distances among elements accordingly to your ideas, not positioning. Also you might want to add normalize.css before your styles for better cross-browserness. So, you can start again from here:
html {
box-sizing: border-box;
font-size: 14px;
}
*, *:before, *:after {
box-sizing: inherit;
}
nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover:not(.active) {
background-color: #000;
}
.active {
background-color: #840D55;
}
header {
background-color: #840D55;
border-bottom: solid;
border-bottom-color: #840D55;
}
header img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
#wrapper {
width: 90%;
margin: 0px auto;
border-left: solid;
border-right: solid;
border-left-color: #333;
border-right-color: #333;
}
section {
color: #333;
padding-left: 20px;
}
section:after {
content: "";
display: table;
clear: both;
}
h1 {
color: #333;
padding: 0;
text-align: center;
}
h2 {
color: #333;
}
h3 {
color: #333;
}
p {
line-height: 1.5;
}
.floatLeft, .floatRight {
line-height: 1.8;
width: 50%;
text-align: left;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
padding-left: 10%;
}
#schAlign {
padding-right: 20px;
}
footer {
clear: both;
color: #fff;
text-align: center;
padding: 1rem;
background-color: #840D55;
}
#media (max-width: 767px) {
#wrapper {
width: 100%;
}
.floatLeft, .floatRight {
width: 100%;
padding: .8rem;
}
}
<div id="wrapper">
<div id="container">
<nav>
<a class="active" href="">Home</a>
About
Pastors
Contact
</nav>
<header>
<img src="Images/bannerImg.jpg" alt="Flame of Fire Church">
</header>
<h1>In the name of Jesus, come and be blessed.</h1>
<section>
<div class="floatLeft">
<h3>Acts chapter 2 verse 38 says</h3>
<blockquote>Peter replied, "Repent and be baptized, every one of you, in the name of
Jesus Christ for the forgiveness of your sins. <strong><em>And you will receive the gift of the <u>Holy Spirit</u>.</strong></em>"</blockquote>
<br />
<h3>Verse 39 continues</h3>
<blockquote>"The promise is for you and your children and for all who are far off - for all whom the Lord our God will call."</blockquote>
<br />
<p></p>
</div>
<div class="floatRight">
<h2>Service Schedule</h2>
<div id="schAlign">
<p>Wednesday Night</p>
<ul>
<li>7:00PM</li>
</ul>
<p>Sunday Morning</p>
<ul>
<li>10:00AM</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<!-- This site built with love and joy by Keith Graham -->
© Flame of Fire Church, 2017. All rights reserved.
</footer>
</div>