Debugging with CSS

<header class="header">
  <h1>Fashion Hub</h1>
</header>

<div class="container">
  <aside>
    <h2>Categories</h2>
    <ul>
      <li>Dresses</li>
      <li>Accessories</li>
      <li>Footwear</li>
    </ul>
  </aside>

  <main class="content">
    <h2>Elevate Your Style: Fashion Hub</h2>
    <p>Your Premier Destination for Trendy Fashion!</p>
  </main>
</div>

<footer class="footer">
  <p>&copy; 2023 Fashion Hub. All rights reserved.</p>
</footer>

header {
  background-color: gray;
  color: white;
  text-align: center;
  padding: 20px;
}

.container {
  display: flex;
}

main {
  width: 70%;
  padding: 20px;
}

aside {
  width: 30%;
  background-color: lightgray;
  padding: 20px;
}

ul {
  padding-top: 20px;
}

footer {
  background-color: gray;
  color: white;
  text-align: center;
  padding: 20px;
}

header {
  background-color: gray;
  color: white;
  text-align: center;
  padding: 20px;
}

.container {
  display: flex;
}

main {
  width: 70%;
  padding: 20px;
}

aside {
  width: 30%;
  background-color: lightgray;
  padding: 20px;
}

/*outline applied to unordered list*/
ul {
  padding-top: 20px;
  outline: 1px solid tomato;
}

footer {
  background-color: gray;
  color: white;
  text-align: center;
  padding: 20px;
}