Why my body element is not taking 100% of the width as i minimize the window?-CodePudding

Hi I'm new in web dev and i really want to know why in the next code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid black;
}

html {
  font-family: "Rubik", sans-serif;
  color: #444;
}

.container {
  margin: 0 auto;
  width: 1200px;
  background-color: #107b72;
}

header {
  background-color: rgb(31, 210, 103);
  /* height: 100vh; */
}

nav:first-child {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  background-color: green;
}

h1 {
  /* value of space scale */
  font-size: 52px;
  margin-bottom: 32px;
}

p {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 48px;
}

.btn:link,
.btn:visited {
  font-size: 20px;
  font-weight: 600;
  background-color: #e67e22;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 16px 32px;
  border-radius: 9px;
}

h2 {
  font-size: 44px;
  margin-bottom: 48px;
}

section {
  padding: 96px 0;
  background-color: rgb(7, 183, 148);
}

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Rubik:wght@400;500;700&display=swap" rel="stylesheet" />
<header>
  <nav >
    <div>LOGO</div>
    <div>NAVIGATION</div>
  </nav>
  <div >
    <h1>A healthy meal delivered to your door, every single day</h1>
    <p>
      The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutricional needs
    </p>
    <a href="#" >Start eating well</a>
  </div>
</header>
<section>
  <div >
    <h2>Some random heading</h2>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quas officia illum laudantium, sit sint, assumenda magnam nisi vitae nihil impedit! Ad molestiae sapiente laboriosam corporis impedit. Velit aliquid natus a amet voluptates unde perferendis,
      consequuntur deserunt maiores nihil ipsum.
    </p>
  </div>
</section>

codepen
https://codepen.io/kimo-007/pen/WNymqgr

my containers (.containers) are taking like only the width of the viewport, as we move to the right side we can see that the child elements (ones that i centered with margin: 0 auto;) are overflowing, this ones have a fixed width in order to center them. But i really don't understand why the containers stays like in that width, the one of the viewport, why not go all the way and occupy the same as the child elements width?, so this ones are block elements and in the dev tools marks also the complete body with this width, so i didn’t provided any fixed one for this element, so the block elements take 100% of the viewport width? so can you clarify me why this behavior, please!!!!

I really want to understand the behavior behind this html and css visualization on the viewport

CodePudding user response：

Hi,

Because you mentioned 1200px as a fixed width for containers;

use this

.container
{
margin: 0 auto;
width: 100%;
background-color: #107b72;
}

CodePudding user response：

You need to add another property max-width:100% in .container like below:

.container {
    margin: 0 auto;
    width: 1200px;
    max-width:100%;
    background-color: #107b72;
}

See the example below:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid black;
}

html {
  font-family: "Rubik", sans-serif;
  color: #444;
}

.container {
  margin: 0 auto;
  width: 1200px;
  max-width:100%;
  background-color: #107b72;
}

header {
  background-color: rgb(31, 210, 103);
  /* height: 100vh; */
}

nav:first-child {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  background-color: green;
}

h1 {
  /* value of space scale */
  font-size: 52px;
  margin-bottom: 32px;
}

p {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 48px;
}

.btn:link,
.btn:visited {
  font-size: 20px;
  font-weight: 600;
  background-color: #e67e22;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 16px 32px;
  border-radius: 9px;
}

h2 {
  font-size: 44px;
  margin-bottom: 48px;
}

section {
  padding: 96px 0;
  background-color: rgb(7, 183, 148);
}

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Rubik:wght@400;500;700&display=swap" rel="stylesheet" />
<header>
  <nav >
    <div>LOGO</div>
    <div>NAVIGATION</div>
  </nav>
  <div >
    <h1>A healthy meal delivered to your door, every single day</h1>
    <p>
      The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutricional needs
    </p>
    <a href="#" >Start eating well</a>
  </div>
</header>
<section>
  <div >
    <h2>Some random heading</h2>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quas officia illum laudantium, sit sint, assumenda magnam nisi vitae nihil impedit! Ad molestiae sapiente laboriosam corporis impedit. Velit aliquid natus a amet voluptates unde perferendis,
      consequuntur deserunt maiores nihil ipsum.
    </p>
  </div>
</section>

CodePudding user response：

i'm not sure to understand your question, but if you want a full width container why you write "width:1200px" to your container" ?

 .container {
        margin: 0 auto;
        width: 1200px;
        background-color: #107b72;
      }

Remove the fixed width, and your div take all the size who need You don't need to precise them

 .container {
        margin: 0 auto;
        background-color: #107b72;
      }