Full-width div on mobile

Question

I have this blue top link here and this top is taking all width size, and that's what I want. So if you resize your window or open it on mobile this blue div is putting margins both sides, twitter bootstrap responsive is doing that. My code is exactly like this answer but tb still putting margins, that's my code:

<!-- this div is inserting blue bg image and wrap all content -->
<div class="background-top"> 
    <div class="container">
        <div class="span6"></div>
        <div class="span6"></div>
    </div>
</div>

Answer 1

I would use a similar media query to target the top background div as its Bootstrap that seems to be adding the body padding. Give this a go:

@media (max-width: 767px) {
  .background-top {
    margin-left: -20px;
    margin-right: -20px;
  }
}