Div 100% Width and a Margin

Display a div width 100% with margins

You can use the following CSS to achieve the desired result:

#page {
   background: red;
   overflow: auto;
}

#margin {
   background: green;
   height: 280px;
   margin: 10px
}

Div 100% width and a margin

You don't have to give width when you are using margin-left and margin-right.

Try This:

#main
{
 margin-left: 10%;
 margin-right: 10%;
 background: red;
}

div with 100% width including margins

be sure to use box-sizing: border-box when using padding to force the padding to behave like it should. As far as the horizontal padding goes, you can just add padding: 0 3px; to .container

*{ //adds to all elements or you can just add to the ones that use padding
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;    
}

.container{
  border: 1px solid gray;
  padding: 0 3px; <-----add this
}

FIDDLE

How to make an element width: 100% minus padding?

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.

Make div 100% width with equal margins on both sides of content area

In CSS when you specify a width, it usually means the inner-width not the outer-width.

outer-width = inner-width + margin + padding + border

In your case, your div is becoming 100% + 20px (left padding) + 20 px (right padding)

When you add display: block, the div will automatically try to take up as much width as possible.

Sure, in CSS 3 you could take advantage of the box-sizing property as focorner suggested. But to be compatible i would suggest removing width: 100% and adding display: block.

For this to work, you would need an outer div which has 100% width and is display:block

TL;DR

{
display: block;
// width: 100%; remove this
padding: 20px
}

How to make div 100% width when parent tag has padding?

You could apply a negative margin to the inside container to negate the padding

<body style="padding:0 40px">
<div style="width:100%;margin:0 -40px"> </div>
</body>

margin left and right on width 100%

Remove the width. As with all block elements, divs will automatically expand to fill the available width. When you specify a width of 100%, you are telling it to be the same size as its container, not to fill the available width. As width does not include margins, specifying the margin in addition to the width causes the div to be shifted to the right by the left margin amount, and the right margin exists off the screen.

The input with 100% width inside a div is overlapping the div

instead margin on the children, you may use padding on the parent , so it can be included in box-sizing

as specified in the linked answer you said did not work for you , see below the link to specification of box-sizing to understand how it works and how to use it

possible example: https://jsfiddle.net/gr7cbevj/

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

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

.container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.container_calculator {
  width: 100%;
  max-width: 400px;
  background-color: tomato;
  border-radius: 5px;
  margin: 5px auto;
  padding: 0 20px;/* added */
  box-sizing: border-box;/* added */
}

.container_calculator>label {
  display: inline-block;
  color: #fff;
  margin: 10px 0 0 0px;/* modified */
}

.container_calculator>input {
  height: 20px;
  border: 1px solid tomato;
  border-radius: 5px;
  width: 100%;
  margin: 5px 0px;/* modified */
}

div.result_bin2dec {
  border: 1px solid #edf2f7;
  background-color: #edf2f7;
  border-radius: 10px;
  margin-top: 30px;
  height: 35px;
}

<div class="container">
  <div class="container_calculator">
    <label>Number</label>
    <input type="text" id="number">
  </div>

  <div class="result_bin2dec">
    <pre>
                Dec: 10
                Bin: 01
            </pre>
  </div>
</div>

Margin + ? = 100% width in flexbox

You can make the content divs 100% width minus margin by using the calc function (comments added to the lines I changed below):

.outerContainer {

  display: flex;

  align-items: center;

  justify-content: center;

  position: absolute;

  width: 100vw;

  height: 100vh;

  background-color: black;

}

.modalContainer {

  width: 80vw;

  background-color: white;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}

 

.content1 {

  margin: 20px 28px 10px 28px;

  font-size: 27px;

  line-height: 21px;

}

.content2 {

  margin: 10px 28px 20px 28px;

  width: calc(100% - 56px);    /* 100% width minus 28px x 2 */

}

.content2 > input {

    width:100%;              /* make input stretch full width */

}

<html>

  <body>

    <div class="outerContainer">

      <div class="modalContainer">

        <div class="content1">

          Hello, World!

        </div>

        <div class="content2">

           <input type="text" />

        </div>

      </div>

    </div>

  </body>

</html>