我的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> <a href="">About</a> <a href="">Pastors</a> <a href="">Contact</a> </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 --> &copy; 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> <a href="">About</a> <a href="">Pastors</a> <a href="">Contact</a> </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 --> &copy; Flame of Fire Church, 2017. All rights reserved. </footer> </div>