Add a Container <div> for Better Content Margins

[MaadhavBhatt]

I’ve noticed that the content in the sections tends to stretch edge-to-edge, which can make things look a little cramped and less visually appealing. To address this, I suggest using a container <div> inside each section to better control the content layout.

Proposed Solution

• Add a <div class="container"> inside each section that:
  • Has a width of 80% (or another appropriate percentage).
  • Uses margin: auto to center the content.
• Keep the background color and styling applied to the section itself to maintain the existing design.

Here’s a quick example for reference:

<section class="hero">
  <div class="container">
    <p>This content is centered and doesn’t touch the edges!</p>
  </div>
</section>

.container {
  width: 80%;
  margin: 0 auto;
}

.hero {
  background-color: lightblue;
  padding: 2rem 0;
}

.container is a utility class that you can use everywhere.

This improves readability by adding breathing room and by giving the page a cleaner, more polished look.