ボディーコンテナの非流動性にもかかわらずフッタ全幅（コンテナ流体）にする

Question

フッタの幅をブラウザウィンドウの幅全体に合わせるにはどうすればよいですか？

Note：私はブートストラップを使用していますが、フッターは 'container-fluid'を使用しますが、ページコンテンツは 'container'を使用します。

ライブリンク：http://185.123.96.102/~kidsdrum/moneynest.co.uk/blog.html

HTML

<footer class="container-fluid" style="margin-top: 30px;"> 
    <div class="row"> 
    <div class="col-sm-7 footercta"> 
    <h4 class="bottomoffer">Sign up to access your free Jumpstart your Finances email course:</h4> 
<div id="mc_embed_signup2"> 
    <div id="mc_embed_signup_scroll"> 




<div id="mlb2-2024903" class="ml-subscribe-form ml-subscribe-form-2024903"> 
    <div class="ml-vertical-align-center"> 
     <div class="subscribe-form ml-block-success" style="display:none"> 
      <div class="form-section"> 
       <h4></h4> 
       <p>Success!</p> 
      </div> 
     </div> 
     <form class="ml-block-form" action="//app.mailerlite.com/webforms/submit/i4m1h1" data-code="i4m1h1" method="POST" target="_blank"> 
      <div class="subscribe-form"> 
       <div class="form-section"> 
        <h4></h4> 
        <p></p> 
       </div> 
       <div class="form-section"> 
        <div class="form-group ml-field-email ml-validate-required ml-validate-email"> 
         <input type="email" name="fields[email]" class="form-control" placeholder="Email*" value="" id="footer-cta-input"> 
        </div> 
       </div> 
       <input type="hidden" name="ml-submit" value="1" /> 
       <button type="submit" class="text-uppercase btn btn-primary btn-lg btn-bottom primary gradient-on"> 
        Start Class Now 
       </button> 
       <button disabled="disabled" style="display: none;" type="button" class="loading gradient-on"> 
        <img src="//static.mailerlite.com/images/rolling.gif" width="20" height="20" style="width: 20px; height: 20px;"> 
       </button> 
      </div> 
     </form> 
     <script> 
      function ml_webform_success_2024903() { 
       jQuery('.ml-subscribe-form-2024903 .ml-block-success').show(); 
       jQuery('.ml-subscribe-form-2024903 .ml-block-form').hide(); 
      }; 
     </script> 
    </div> 
</div></div> 
<script type="text/javascript" src="//static.mailerlite.com/js/w/webforms.js?v25"></script> 


    </div> </div> 
    <div class="col-sm-5 footerlinks"> 
    <br> 
    <ul class="mylist"> 
      <li><a href="/">Home</a></li> 
    <li><a href="/blog.html">Blog</a></li> 
    <li><a href="/about.html">About</a></li> 
    <li><a href="/contact.html">Contact</a></li> 
    </ul> 
    <ul class="mylist2"> 
    <li><a href="https://www.facebook.com/ukmoneynest/">Facebook</a></li> 
    <li><a href="https://twitter.com/ukmoneynest">Twitter</a></li> 

    </ul> 
    </div> 

    </div> 
    <br> 
    <br> 
    <div class="finalfooterlinks"><p> 
    <a href="/privacy-policy.html">Privacy Policy</a> | <a href="/terms-and-conditions.html">Terms of Service</a></p> 

    <p>&copy; Copyright 2015 - 
<script type="text/javascript"> 
    now = new Date 
    theYear=now.getYear() 
    if (theYear < 1900) 
    theYear=theYear+1900 
    document.write(theYear) 
</script></div> 
<br> 

</footer> 

Answer 1

footerは、.containerの中にあり、1170px です。

だから、ここでそれを取り除くだけです。

Answer 2

あなたが外であなたのフッターを移動し、直接div.containerた後、それがブラウザウィンドウの全幅にまたがる場合。

Answer 3

それはあなたが望むものですか？

<div class="container"> 
    <p>Your content goes here</p> 
</div> 

<footer class="footer"> 
     <div class="container"> 
      <p>Your footer content here.</p> 
     </div> 
</footer> 

Answer 4

あなたは、コンテナの外にフッターを移動するだけで、あなたのコードに、このCSSを追加したくない場合は、別の解決策：

footer { 
position: relative; 
width: 100vw; 
left: calc(-50vw + 50%);} 

これはフッターになりますが、ビューポートの幅の100％を持っています、ビュー要素の幅の50％（親要素の幅の50％を引いた値）を左に移動して、画面の端に合わせます。私はここでこの答えを見つけました：Is there are way to make a child DIV's width wider than the parent DIV using CSS?。

このヘルプが必要です。