div width 100 percent not working in mobile browser

Question 1

This what was happening to me too. Resizes on the desktop just fine but due to a 728px banner at the top of my blog, mobile was looking terrible. It's hard to fit a wide banner on such a small screen without causing problems. If you don't have a banner, maybe you have some element that's too wide, throwing off the rest of the design.

This fixed the problem: <meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" /> (This goes in the <head>...</head>)

Lower the initial-scale down from 1.0 till your elements can reach all the way across the page at 100%. This scale made my text a little too small, but Flowtype.js helped. I could go with a smaller banner but I'm satisfied with this solution for now.

UPDATE: The above solution is not really device independent. For example, the "scale" might look great on your phone but too small on your tablet. You might want this instead:

<meta name="viewport" content="width=800" />

This makes all your devices act like a screen that's 800 pixels wide. Or whatever width you need. Works beautifully on my Android phone and Nexus tablet. I think desktop browsers ignore the "viewport" setting, which is fine by me.

Question 2

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>

Question 3

I haven't tested this out on tablet or a mobile phone, but I think the problem is in setting a fixed width to the "container" div. Since you have set 100% width for html, body and the header div, these will always occupy 100% of the width irrespective of whether it is a browser, a tablet or a mobile phone. However, this is not the case with the "container" div as it has a fixed width. Try resetting the width of the "container" div in this manner:

.container {
    width: inherit;
    margin: 0 auto;
    text-align: center;
}

Question 4

Building on PJ Brunet's answer, I had a similar styling problem, but wasn't getting enough versatility from changing the meta tags in the html head. Instead, I added minimum width values in pixels to the css. Using the original question as an example:

.header {
  /* restrict the smallest device size to this width */
  min-width: 475px;
  height: 200px;
  background-color: #ffffff;
  padding-top: 8px;
}

Then you can target the next conventionally sized device:

@media (min-width:641px) {
    .header {
      /* force devises with a smaller width to observe this style */
      min-width: 700px;
    }
}

Maybe not the best practice, but it will allow you to capture all devise sizes into more manageable groups to suit the the design.

Question 5

You can also give min-width to body. Something like body {width: 1200px;}, depending on your width settings. Some clients might want the exact copy of desktop in their mobile!.