Адаптивный дизайн - сохраняйте положение деления слева, когда ширина становится меньше

Question

У меня есть следующий макет:

• Обертка, которая получает всю ширину браузера
• правая оболочка (меню), которая всегда близка к праву браузера
• заголовок, который имеет максимальную ширину и центрирован
• содержимое выравнивается по заголовку

Когда разрешение ниже определенного шага (32rem) и wrapper_right приближается к header Я хочу, чтобы header получил меньшую ширину, чтобы wrapper_right не проходил через него.

Проблема в том, что header не остается выровненным по левому краю content, будучи установленным влево, вправо автоматически.

Я пытаюсь использовать margin-left:80px, но не работает должным образом.

Если разрешение падает ниже 27rem, я хочу, чтобы wrapper_right был скрыт, и заголовок вернулся к обычному значению.

OBS. 27rem, 32rem, например, должны быть видны в поле кода. Я могу изменить HTML-код, если это необходимо.

.wrapper {
  height: 6rem;
  position: relative;
  width: 100%;
  background-color: red;
  display: inline-block;
}

.header {
  margin: 1.5rem auto 0;
  max-width: 30rem;
  background-color: blue;
}

@media (max-width: 32em) {
  .header {
    max-width: calc(30rem - 80px);
  }
}

.wrapper-right {
  background: green;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
}

.content {
  max-width: 30rem;
  margin: 0 auto;
  background-color: orange;
}

<div class="wrapper">
  <div class="header">
    <div> lorem ipsum></div>
    <div> lorem ipsum></div>
    <div> lorem ipsum></div>
  </div>
  <div class="wrapper-right">menu</div>
</div>
<div class="content">content</div>

Answer 1

Это то, что вы после?https://codepen.io/panchroma/pen/PxKBBV

Важными битами в CSS являются:

• строки 36-40, где мы масштабируем ширину .header в области просмотра ниже 40rem

• строки 42 - 50, где мы прячемся .wrapper-right, и возвращаем .header к полной ширине

В качестве FYI,у вашего CSS есть класс с названием .l-header, но я не вижу, куда вы идете с этим.

Надеюсь, это поможет!

HTML
Как первоначально отправлено

CSS

.wrapper {
  height: 6rem;
  position: relative;
  width: 100%;
  background-color: red;
  display: inline-block;
}

.header {
  margin: 1.5rem auto 0;
  max-width: 30rem;
  background-color: blue;
}

@media (max-width: 32em) {
  .l-header {
    max-width: calc(30rem - 80px);
  }
}

.wrapper-right {
  background: green;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
}

.content {
  max-width: 30rem;
  margin: 0 auto;
  background-color: orange;
}

@media (max-width: 40rem) {
  .header{
    width:calc(75vw - 80px);
  }
}

@media (max-width: 27rem) {
  .wrapper-right{
    display:none;
  } 

  .header{
    width:100%;
  }
}

Версия 2

Исходя из ваших комментариев, вот версия 2 https://codepen.io/panchroma/pen/VVMJxM

Важным моментом является то, что я добавил .header-wrapper.Затем мы меняем левый и правый отступы на .header-wrapper в различных окнах просмотра, чтобы сохранить выравнивание заголовка и содержимого.

Удачи!

HTML

<div class="wrapper">
  <div class="header-wrapper">
    <div class="header">
      <div> lorem ipsum></div>
      <div> lorem ipsum></div>
      <div> lorem ipsum></div>
    </div>
   </div>
  <div class="wrapper-right">menu</div>
</div>
<div class="content">content</div>

CSS

/* note that I'm using normalize.css in the CSS setings */
/* https://necolas.github.io/normalize.css/             */
.wrapper {
  height: 6rem;
  position: relative;
  width: 100%;
  background-color: red;
  display: inline-block;
  margin-right:80px;
}

.header {
  margin: 1.5rem auto 0;
  max-width: 30rem;
  background-color: blue;
  position:relative;
  z-index:5;
}


.wrapper-right {
  background: green;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
}

.content {
  max-width: 30rem;
  margin: 0 auto;
  background-color: orange;
}



@media (max-width: 40rem) {
  .header-wrapper {
    /* add  padding-right to make room for .wrapper-right    */
    /* have used 81px instead of 80px so we can be certain   */
    /* that the div isn't extending under .wrapper-right     */
    padding-right:81px;

    /* add padding-left to keep .header and .content aligned */
    /* logic is that the space to the left of .content       */
    /* is the half of the window width - width of .content   */
    padding-left:calc(50vw - 15rem);    
  }
}


/* at viewports below 27rem, hide .wrapper-right and return .header to full width */
@media (max-width: 27rem) {
  .wrapper-right{
    display:none;
  } 

  .header-wrapper{
    padding:0;
  }
}