Responsive Huddle landing page with vanilla HTML and CSS

Hi @JEWebDev,

Congratulations on successfully completing the challenge!

Your solution looks nice, though there are a couple of things you can improve which I hope will be helpful!

Issue: Website Stretched on Large Screens

Your whole website gets stretched for large screen sizes, not just the footer, but other components as well. They appear left-aligned and don't feel normal because of the lack of a maximum width. This issue arises because you didn't set a max-width for your website's container.

Solution: Use a Wrapper with max-width

To solve this, wrap all your components (header, main, footer, .attribution) inside a div and give it a maximum width using the max-width property. This will ensure that your content remains centered and doesn't stretch awkwardly on larger screens.

Here's an example of how you can do it:

<div class="container">
  <header>
    <!-- Your header content -->
  </header>
  <main>
    <!-- Your main content -->
  </main>
  <footer>
    <!-- Your footer content -->
  </footer>
  <a class="attribution">
    <!-- Your attribution content -->
  </a>
</div>

And in your CSS:

.container {
  max-width: 1200px; /* or any width that suits your design */
  margin: 0 auto;
  padding: 0 20px; /* optional padding for better spacing */
}

I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!