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