attempting to make a simple layout and have hit a dead end. I am trying to make a page that perfectly fits the screen such that there is no scrolling what-so-ever. Basically, in the included code, I'd like to have the reddish title bar (at the top) display on top of the yellowish container. The height of the yellowish container is set to `100vh` so as to span the height of the `viewport`. In this way, the page will be perfectly sized such that you will never need to scroll.

I think it has to do with the `z-index`...which I thought I understood up until this point. I've watched videos, read articles, and tried everything I could think of. My last resort is trying my luck online.

```css
body,
html {
  height: 100%;
  margin: 0;
}

.bg {
  background-color: rgb(171, 171, 175);
}

header h1 {
  text-align: center;
  position: relative;
  margin: 0;
  padding-top: 0.8rem;
  background-color: coral;
}

.flex-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content-box {
  border: solid 6px #e7c022;
  border-radius: 0.8rem;
  height: 45%;
  background-color: rgba(128, 128, 128, 0.7);
}

.main-container {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 55vw;
  max-width: 700px;
  background-color: burlywood;
}

.code-container {
  height: 80%;
  align-items: center;
}

.key-container {
  height: 20%;
  align-items: center;
}

.key-code {
  font-size: 20rem;
  font-family: 'Yellowtail', cursive;
}

.key {
  height: 30%;
  width: 20%;
  border: solid 4px #e7c022;
  border-radius: 0.5rem;
  text-align: center;
  margin-bottom: 3rem;
  font-size: 40px;
  font-family: 'Share Tech Mono', monospace;
}

.key div {
  margin-bottom: 0.2rem;
}
```

```html
<div class="bg">
  <header>
    <h1>Titlebar</h1>
  </header>
  <div class="flex-container main-container">
    <div class="content-box">
      <div class="flex-container code-container">
        <div class="key-code">
          <span>65</span>
        </div>
      </div>
      <div class="flex-container key-container">
        <div class="flex-container key">
          <div>a</div>
        </div>
      </div>
    </div>
  </div>
</div>
```