Блог

У меня возникла проблема с тем, что я хочу, чтобы у меня container была ширина 950 пикселей, если это возможно, — но если размер окна будет изменен, то он соответственно уменьшится до размера окна, в настоящее время, если размер окна изменен, требуется горизонтальная прокрутка, чтобы увидеть все wrapper amp; container — что я упускаю?

 .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; } 

 lt;div class="wrapper"gt;  lt;div class="container"gt;lt;/divgt;  lt;/divgt; 

Добавьте box-sizing: border-box; , чтобы включить padding в ширину, в противном случае она будет добавлена на 100%, следовательно, превысит родительскую ширину.

 .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; } 

 lt;div class="wrapper"gt;  lt;div class="container"gt;lt;/divgt;  lt;/divgt; 

Для этого вам нужно объединить данные на width основе %и пикселей max-width , попробуйте это:

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