How to set changable width ( div with background ) to make look good on different devices?

Question

I'm using Twitter Bootstrap. Here is my problem: I need to set div's background color,which should be full screen, but when I try :

and my HTML:

    <div class="rowHome">
      <div class="container">  
       <div class="row">
     ...
        </div>
      </div>
     </div>

and full CSS:

    .container{
    width: 960px;       
}
    ...
     .rowHome{
margin-top:10px;
width:100%;
background-color:#400143;
}

it look like this, when I resize page:

but when I scroll right I see the bug:

Can someone tell me where is my error ?

Answer 1

This type of problem is mostly come when the parent have flexible width & his child have fixed width. Write this in your css:

body{
  min-width:960px;
}

Check this for more iPad background for div blocks not spanning entire width of screen