<body>
  <aside>
    <ul class="menu">
      <li>Home</li>
      <li>Blog</li>
      <li>Contact</li>
    </ul>
  </aside>
  <section id='main'>
    <h3>Hello, this is my cool site!</h3>
    <p>Look at all the neat things I write about!</p>
    <p>Click my ads so I can sustain myself off a passive income!</p>
  </section>
</body>
body {
  background-color: var(--bg-color);
  color: var(--font-color);
  display: flex;
  font-size: var(--font-size);
}

#main {
  background-color:var( --content-bg-color);
  border: 1px solid #333;
  margin-left: 20px;
  padding: 14px;
  width: 550px;
}

.menu {
  font-family: var(--menu-font);
  padding-left: 10px;
}

.menu li {
  list-style: none;
  margin-bottom: 10px;
  margin-left: 0;
 
}

:root {
  --bg-color: #33ffcc;
  --font-color: black;
  --font-size: 14px;
  --content-bg-color: #fefefe;
  --menu-font: Helvetica, 'Courier New', san-serif;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.