I'm having the issue that I want my container to have width 950px if possible - but if the window is resized then it will reduce down to the size of the window accordingly, currently if the window is resized it requires horizontal scrolling to see entire wrapper & container - what am I missing?

.wrapper {
  max-width: 950px;
  margin-right:  32px;
}

.container {
  background-color: teal;
  padding: 48px 64px 48px 64px;
  border: 1px solid grey;
  width: 100%;
  min-height: 414px;
}

<div class="wrapper">
  <div class="container"></div>  
</div>  

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Add box-sizing: border-box; to include the padding in the width, otherwise it will be added to the 100%, therefore exceeding the parent width.

.wrapper {
  max-width: 950px;
  margin-right:  32px;
}

.container {
  box-sizing: border-box;
  background-color: teal;
  padding: 48px 64px 48px 64px;
  border: 1px solid grey;
  width: 100%;
  min-height: 414px;
}

<div class="wrapper">
  <div class="container"></div>  
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You need to combine %-based width and pixel-based max-width for that, try this:

.wrapper {
  width: 90%;
  max-width: 950px;
  margin: 0 5%;
}