Responsive design - mantain the aligment of a div to the left when the width becomes smaller

Question

I have the following layout:

• a wrapper that get all the width of the browser
• a wrapper-right(menu) that is always close to the browser right
• header that has a max width and is centered
• content align with header

When the resolution is below a specific step(32rem) and wrapper_right get close to the header I want the header to get a smaller width, so the wrapper_right doesn't go over it.

The problem is that the header doesn't remain align to the left to the content, being set to left,right auto.

I try to use margin-left:80px, but doesn't work properlly.

If the resolution goes below 27rem I want the wrapper_right to be hidden, and header back to normal.

OBS. 27rem, 32rem are just for example, to be visible in the code box. I can modify the html code if is necessary.

.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

Is this what you're after? https://codepen.io/panchroma/pen/PxKBBV

The important bits in the CSS are:

• lines 36-40 where we're scaling the width of .header at viewports below 40rem

• lines 42 - 50 where we're hiding .wrapper-right, and restoring .header to full-width

As an FYI, your CSS has a class titled .l-header but I couldn't see where you were going with this.

Hope this helps!

HTML
As originally posted

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

Version 2

Based on your comments, here's version 2 https://codepen.io/panchroma/pen/VVMJxM

The important bits are that I added the .header-wrapper. Then we're changing the left and right padding on .header-wrapper at various viewports to keep the header and content divs aligned.

Good luck!

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