我的HTML内容超出了容器

Question

我正在为教堂完成一个网站，我无法弄清楚如何将我的部分内容保存在容器内。它溢出了页脚。我对CSS不是很有经验，所以我不确定问题出在哪里。我试过调整该部分的显示类型。我已经溢出了：包括隐藏。我不确定问题出在哪里，除了我的经验不足之外，就是这样。我知道我的限制肯定超过了这个项目。我只是想用这个帮助我的教会，并完成它。非常感谢任何帮助。

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

更新了样式（没有positioning - 似乎你不需要它 - 以及其他膨胀）。使用边距根据您的想法设置元素之间的距离，而不是定位。此外，您可能希望在样式之前添加normalize.css以获得更好的跨浏览性。所以，你可以从这里重新开始：

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>