Div Not 100% Width of Browser

Make div 100% Width of Browser Window

There are new units that you can use:

vw - viewport width

vh - viewport height

#neo_main_container1
{
   width: 100%; //fallback
   width: 100vw;
}

Help / MDN

Opera Mini does not support this, but you can use it in all other modern browsers.

CanIUse

Sample Image

Div not 100% width of browser

It's likely the page's margin and/or padding.

Add:

html, body {
  padding: 0;
  margin: 0;
}

.header {
  margin: 0;
}

html,
body {
  padding: 0;
  margin: 0;
}

.header {
  margin: 0;
  position: relative;
  background-color: #088ed7;
  width: auto;
  height: 20px;
}

<div class="header">...</div>

Why does DIV not occupy entire width of screen on mobile Chrome when another DIV has 100% width?

Your issue does indeed occur on Chrome on desktop, and is not restricted to just mobiles.

As for the cause of your problem, it's to do with the box model:

By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height you have to adjust the value you give to allow for any border or padding that may be added.

In order to ensure that your .b element is constrained within the width of the container is to apply box-sizing: border-box it, as is seen in the following:

body {  margin: 0;}
.a {  background: orange;  border: 2px solid black;}
.b {  padding: 0 2em;  width: 100%;  background: lightblue;  border: 2px solid black;  box-sizing: border-box;}

<body>  <div class="a">Foo</div>  <div class="b">Bar</div></body>

Divs not occupying 100% screen width

What is causing the overflow is the grid-gap property in #header and .grid, they are not counted towards the percentage values you've added, you should remove that and use padding to create the desired spacing.

Edit:

 #header {
    width: 100%;
    height: 50px;
    background-color: red;
    display: grid;
    grid-template-columns: 30% 70%;
    /* grid-gap: 10px; remove this */
    position: fixed;
}
.grid {
    width: 100%;
    height: 150px;
    display: grid;
    grid-template-columns: 25% 75%;
    /* grid-gap: 10px; and this */
}

Edit 2:

Alternatively you can also use the fr unit to occupy the remaining space and still use the grid-gap property:

 #header {
    width: 100%;
    height: 50px;
    background-color: red;
    display: grid;
    grid-template-columns: 30% 1fr; /* 1fr will be 70% - 10px */
    grid-gap: 10px;
    position: fixed;
}
.grid {
    width: 100%;
    height: 150px;
    display: grid;
    grid-template-columns: 25% 1fr; /* 1fr will be 75% - 10px */
    grid-gap: 10px;
}

div wont fill 100% width on mobile Chrome/Safari Browser

Your problem is in div.container. Its width is fixed at 1100px. In mobile device has resolution width smaller than that number, browser must scale to show the whole page and then your problem appear. If you add this line to header, you will see it clearly.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

Solution is very simple

.container{
    /*width: 1100px;*/
    max-width: 1100px;
}

Hope this help.

Div Width 100% not working when resizing of browser

I figured it out! I set width: 100% to min-width: 100% and that fixes the issues.

100% DIV width is not really 100%

The 100% value is 100% of the parent's width or the view port. See the documentation.

Element width 100% of PAGE (not browser window)

Use position: fixed for the overlay. The scrolling doesn't matter as elements that are fixed will position themselves in relation to the viewport. height: 100% and width: 100% will keep the overlay over the entire page no matter what you do.

From the MDN (emphasis mine):

fixed

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. [...]

CSS / HTML / Demo

* {  margin: 0;  padding: 0;  font-size: 1.5em;}body {  background: white;}.cover {  position: fixed;  height: 100%;  width: 100%;  background: rgba(255, 0, 0, 0.7);}

<div class="cover"></div><h1>I am overlapped!</h1><input type="text" value="cant touch this" />