Jumbotron background image isn't showing full-width

Question

My Jumbotrons background image isn't quite making it full width.

Any idea why?

Live link: http://185.123.96.102/~kidsdrum/moneynest.co.uk/

You can see the the width of the background image doesn't make it as far as the nav bar.

HTML

<div class="container special">
<div class="jumbotron">
  <div class="container text-center">
    <div class="h1extrapadding hidden-xs hidden-sm"></div>  <h1 class="boldme">Aged 20-30 & frustrated with money?</h1> 
    <div class="greenpromobox">
    <div class="h2extrapadding hidden-xs hidden-sm"></div>  <h2 class="boldme">Take our free <b class="jumpstarttext">Jumpstart Your Finances</b> class to<br /> quickly gain control over your finances</h2>


            <!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//moneynest.us11.list-manage.com/subscribe/post?u=9ccf2d2219536b32eaae3c3d1&amp;id=299de51b4e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">


                   <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/hand-drawn-arrow.png" id="handarrow" class="hidden-xs hidden-sm" alt="arrow"><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address" required autofocus>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ccf2d2219536b32eaae3c3d1_299de51b4e" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Start Class Now" name="subscribe" id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

</div>
</div>

 </div>
</div>
  </div>

CSS

.jumbotron {
background-image: url("../img/checking-finances-in-cafe-blurred.png");
background-size: cover;
color: white;
}

#handarrow {
    position: relative;
    top: -50px;
    left: -5px;
    }

    html,body {height:100%;}
.special,.special .jumbotron 
{height:100%;
width: 100%;
}

Answer 1

I think your problem might be the default margin or padding on the html and body tags. Try:

html, body {

    margin: 0px;
    padding: 0px;

}

Not sure if that will work, but it's worth a shot.

Answer 2

The reason for this is bootstrap's container class, that takes up padding on both the left and right hand side. If you remove this class, the image will take up the full screen.

Or, you can use the container-fluid class

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

Use .container-fluid for a full width container, spanning the entire width of your viewport.

I tested it out in Chrome's Developer tools, and that fixed it.

Answer 3

it is due to you have added class container remove this class from first div it will resolve you issue.

<div class="container special"> to <div class="special">