Special div shrinking

Question

How should I change CSS such way, that

• if width of screen > 1100px then left nav width is constantly 555px

Answer 1

Try using media queries:

 @media only screen and (max-width: 1100px) {
   /*your css code */
 }

 @media only screen and (min-width: 1100px) {
   /*your css code */
 }

Here's w3c schools link about media queries.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

The simplest way to accomplish that is to add 2 wrappers, one for the left side and one for the right side, and with that you will be able to easily center where the left/right links wrapper meet.

Remove the <div class="empty-space">empty space</div> element in the markup/CSS and instead, to create the empty space at the left in the left side, simply add margin-left: auto to the left_inner and it will be pushed to the right.

Stack snippet

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1310px;
  font-size: 0.6rem;
}

.wrapper .left,
.wrapper .right {
  flex-basis: 50%;
  display: flex;
}

.wrapper .left_inner {
  margin-left: auto;
  flex-basis: 555px;
  background-color: lightblue;
}
.wrapper .right_inner {
  flex-basis: 462px;
  background-color: orange;
  display: flex;
  justify-content: flex-end;      /*  align content right (at end)  */
}
.wrapper .button_inner {
  flex-basis: 193px;
  background-color: #3ab8a4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left__nav {
  display: inline-block;
  padding: 5px;
  color: darkblue;
  text-decoration: none;
}
.right__nav {
  display: inline-block;
  padding: 5px;
  color: darkred;
  text-decoration: none;
}

/* style for this demo */
.wrapper>div {
  box-sizing: border-box;
  background-color: lightgray;
  border-collapse: collapse;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}
.container-small {
  text-align: center;
  background-color: lightgray;
  max-width: 1100px;
  margin: auto;
  padding: 1rem 0;
}

<div class="wrapper">
  <div class="left">
    <div class="left_inner">
      <a class="left__nav" href="#">Link left</a>
    </div>
  </div>
  <div class="right">
    <div class="right_inner">
      <a class="right__nav" href="#">Link right</a>
    </div>
    <div class="button_inner">
      Button
    </div>
  </div>
</div>
<div class="mark-center">
  &uarr;
</div>
<div class="container-small">
  Some content
</div>

---

Updated

To be able to fullfil both above requirement and to stack them vertical, centered, on narrower screens, you need a media query or a script.

Here is an updated version using a media query for less than 1000px (max-width: 999px)

Stack snippet

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1310px;
  font-size: 0.6rem;
}

.wrapper .left,
.wrapper .right {
  flex-basis: 50%;
  display: flex;
}

.wrapper .left_inner {
  margin-left: auto;
  flex-basis: 555px;
  background-color: lightblue;
}
.wrapper .right_inner {
  flex-basis: 462px;
  background-color: orange;
  display: flex;
  justify-content: flex-end;      /*  align content right (at end)  */
}
.wrapper .button_inner {
  flex-basis: 193px;
  background-color: #3ab8a4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left__nav {
  display: inline-block;
  padding: 5px;
  color: darkblue;
  text-decoration: none;
}
.right__nav {
  display: inline-block;
  padding: 5px;
  color: darkred;
  text-decoration: none;
}

@media (max-width: 999px) {
  .wrapper,
  .wrapper .left,
  .wrapper .right {
    flex-basis: auto;
    flex-direction: column;
    align-items: center;
  }
  .wrapper .left_inner {
    flex-basis: auto;
    margin-left: 0;
  }
  .wrapper .right_inner,
  .wrapper .button_inner {
    flex-basis: auto;
  }
}

/* style for this demo */
.wrapper>div {
  box-sizing: border-box;
  background-color: lightgray;
  border-collapse: collapse;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}
.container-small {
  text-align: center;
  background-color: lightgray;
  max-width: 1100px;
  margin: auto;
  padding: 1rem 0;
}

<div class="wrapper">
  <div class="left">
    <div class="left_inner">
      <a class="left__nav" href="#">Link left</a>
    </div>
  </div>
  <div class="right">
    <div class="right_inner">
      <a class="right__nav" href="#">Link right</a>
    </div>
    <div class="button_inner">
      Button
    </div>
  </div>
</div>
<div class="mark-center">
  &uarr;
</div>
<div class="container-small">
  Some content
</div>

---

If you want the link and button wrapper to fill the width, give them a width and make their content center aligned.

Stack snippet

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1310px;
  font-size: 0.6rem;
}

.wrapper .left,
.wrapper .right {
  flex-basis: 50%;
  display: flex;
}

.wrapper .left_inner {
  margin-left: auto;
  flex-basis: 555px;
  background-color: lightblue;
}
.wrapper .right_inner {
  flex-basis: 462px;
  background-color: orange;
  display: flex;
  justify-content: flex-end;      /*  align content right (at end)  */
}
.wrapper .button_inner {
  flex-basis: 193px;
  background-color: #3ab8a4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left__nav {
  display: inline-block;
  padding: 5px;
  color: darkblue;
  text-decoration: none;
}
.right__nav {
  display: inline-block;
  padding: 5px;
  color: darkred;
  text-decoration: none;
}

@media (max-width: 999px) {
  .wrapper,
  .wrapper .left,
  .wrapper .right {
    flex-basis: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .wrapper .left_inner {
    flex-basis: auto;
    margin-left: 0;
    text-align: center;
    width: 100%;
  }
  .wrapper .right_inner,
  .wrapper .button_inner {
    flex-basis: auto;
    text-align: center;
    justify-content: center;
    width: 100%;
  }
}

/* style for this demo */
.wrapper>div {
  box-sizing: border-box;
  background-color: lightgray;
  border-collapse: collapse;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}
.container-small {
  text-align: center;
  background-color: lightgray;
  max-width: 1100px;
  margin: auto;
  padding: 1rem 0;
}

<div class="wrapper">
  <div class="left">
    <div class="left_inner">
      <a class="left__nav" href="#">Link left</a>
    </div>
  </div>
  <div class="right">
    <div class="right_inner">
      <a class="right__nav" href="#">Link right</a>
    </div>
    <div class="button_inner">
      Button
    </div>
  </div>
</div>
<div class="mark-center">
  &uarr;
</div>
<div class="container-small">
  Some content
</div>