Я не могу сделать так, чтобы мой нижний колонтитул был на всю ширину

Question

Я не могу получить ширину моего нижнего колонтитула. Это следует за div div, который составляет 70%. Я не знаю, как изменить его на полную ширину, потому что когда я перемещаю его вниз, чтобы получить его собственный контейнер, он оказывается в заголовке или поверх предыдущего содержимого. Может кто-нибудь мне помочь?? пожалуйста! thaanks

/* FOOTER */
footer {
    margin-top: 40px;
    position: relative;
    width: 100%;
    height: 200px;
    background: rgba(226, 219, 219, 0.94); 
}
.footer_col1 {
    height: 70px;
    padding-top: 40px;
    text-align: center;
}
.footer_col2 {
    height: 30px;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
}

Here is some of my Html:
<div class="colonne_1_left_section4">
            <h1 style="padding-top: 90px;">COMBINE DESIGN &amp; COLORS</h1>
            <p class="trolley_text">The Art Trolley size 42 x 40.5 centimeters can be combined with our wall mount (Bamboo combined light/dark &amp; light or dark)- and hanged on it.<br><br>
            Choice of color completely up to you:<br><br>
        <img class="trolley_color_icons" alt="trolley color icons"src="billeder/colors_icon.png" style="float: left;">
        </p>
        </div>
        
        <div class="colonne_2_right_section4">
        <img class="trolley1" alt="trolley visual by groos"src="billeder/1.jpg">
        </div><br><br>
        
        
    <footer>
  <div class="footer_col1">
    <a href="#">
      <img alt="instagram_icon" src="billeder/Instagram_icon.png" style="width: 40px; height: 40px; padding-right: 10px;"></a>
    <a href="#">
      <img alt="facebppl_icon" src="billeder/facebook_icon.png" style="width: 40px; height: 40px; padding-left: 10px;"></a>
    </div>
    <div class="footer_col2">VISUAL ART BY GROOS © 2018</div>
        <div class="footer_col3">+45 27 50 12 83     info.visualbygroos@gmail.com</div>
</footer> 
        
</div>  
</div>

<script src="hamburger.js"></script>
<script src="slideshow"></script>
</body>
</html>

Answer 1

Убедитесь, что у ваших body и html всегда есть margin: 0;, в противном случае у вас останется дополнительное место, как у нижнего колонтитула. Таким образом, вы можете использовать ширину 100% и не будете испытывать никаких проблем:)

body, html {
  margin: 0;
}

body, html {
  margin: 0;
}

/* FOOTER */
footer {
    margin-top: 40px;
    position: relative;
    width: 100%;
    height: 200px;
    background: rgba(226, 219, 219, 0.94); 
}
.footer_col1 {
    height: 70px;
    padding-top: 40px;
    text-align: center;
}
.footer_col2 {
    height: 30px;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
}

<div class="colonne_1_left_section4">
  <h1 style="padding-top: 90px;">COMBINE DESIGN &amp; COLORS</h1>
  <p class="trolley_text">The Art Trolley size 42 x 40.5 centimeters can be combined with our wall mount (Bamboo combined light/dark &amp; light or dark)- and hanged on it.<br><br> Choice of color completely up to you:<br><br>
    <img class="trolley_color_icons" alt="trolley color icons" src="billeder/colors_icon.png" style="float: left;">
  </p>
</div>

<div class="colonne_2_right_section4">
  <img class="trolley1" alt="trolley visual by groos" src="billeder/1.jpg">
</div><br><br>


<footer>
  <div class="footer_col1">
    <a href="#">
      <img alt="instagram_icon" src="billeder/Instagram_icon.png" style="width: 40px; height: 40px; padding-right: 10px;"></a>
    <a href="#">
      <img alt="facebppl_icon" src="billeder/facebook_icon.png" style="width: 40px; height: 40px; padding-left: 10px;"></a>
  </div>
  <div class="footer_col2">VISUAL ART BY GROOS © 2018</div>
  <div class="footer_col3">+45 27 50 12 83 info.visualbygroos@gmail.com</div>
</footer>

Answer 2

каждый раз, когда вы используете HTML, убедитесь, что у вашего тега body есть поле 0

body {
        margin: 0;
    }

Answer 3

Попробуйте использовать единицы измерения vw (ширина области просмотра) вместо всего этого% материала.Использование vw позволяет вам определять размер независимо от вида div, над которым вы работаете, внутри других div, но в соответствии с размером экрана вашего окна:

footer {
    width: 100vw;
}

Так как 1vw составляет 1/100 вашего экранаwidth, width: 100vw означает: «Сделать это деление шириной всего экрана».