I am trying to make the left box and the right box stack vertically when seen on a screen 600px or less. I can make the nav bar do that. However I am unable to make the boxes do what the nav bar is doing. Floating, `width`s and `max-width`s do not seem to help, maybe I am using it wrongly? My desired goal is make right box appear underneath left box with no overlap and no overflow.

```css
.topnav {
  background-color: pink;
  overflow: hidden;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
}

.sidebar {
  background-color: #fff5db;
  width: 20%;
  display: inline-block;
  box-sizing: border-box;
  float: left;
  position: absolute;
}

.links-box {
  background-color: none;
  width: 100%;
  border: 1px solid black;
  display: inline-block;
  box-sizing: border-box;
  float: left;
  padding: 10px;
}

.right-content {
  background-color: #fff5db;
  position: relative;
  left: 21%;
  max-width: 79%;
  position: absolute;
  right: 0px;
}

@media only screen and (max-width: 600px) {
  #logo {
    max-width: 100%;
  }
  .topnav {
    float: none;
    max-width: 100%;
  }
  .topnav a {
    float: left;
    width: 100%;
    padding: none;
  }
  .sidebar {
    max-width: 100%;
    width: 100vw;
    float: left;
    clear: both;
    box-sizing: content-box;
  }
  .introduction {
    max-width: 100%;
    width: 100%;
    float: left;
  }
  .right-content {
    max-width: 100%;
    width: 100%;
    float: left;
  }
}
```

```html
<div class="topnav">
  <a href="">link1</a>
  <a href="">link2</a>
  <a href="">link3</a>
  <a href="">link4</a>
  <a href="">link5</a>
  <a href="">link6</a>
</div>

<div class="sidebar">
  <div class="links-box">left box</div>
</div>

<div class="right-content">right box</div>
```

([*fiddle*](https://jsfiddle.net/74c1b60z/))