Huddle Landing Page using flexbox

Hi @kyleebustamante,

Well done for this challenge 👍. Below are a few things that I noticed and you might want to check in order to improve your solution.

• To correct the horizontal overflow you mentioned, simply apply the following CSS rule in your stylesheet:

html,
body {
  margin: 0;
}

By default, all browsers apply some user agent styles to html elements which can sometimes differ from browser to browser. It is therefore a good practice to normalize these user agent styles so that your website gets a uniform default styling on all browsers. You can read more here

• On larger viewports the content is expanding all the way horizontally. I would suggest you to apply a max-with: 1440px; to the <div class="container">. You can then use this <div class="container"> element inside your <header> and <footer> elements as well to keep everything consistent. You should end up with an html structure like this:

html:

...
<header>
  <div class="container">...</div>
</header>

<main>
  <div class="container">...</div>
</main>

<footer>
  <div class="container">...</div>
</footer>
...

CSS:

.container {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

• On certain viewports, the social icon's shape is getting oval. You could easily solve this by refactoring the styles like this:

.social {
  display: flex;
  justify-content: center;
  align-items: center;
}

.social a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #ffffff;
  border-radius: 50%;
}

.social a:not(:last-child) {
    margin-right: 12px;
}

.social i {
    color: #ffffff;
    font-size: 1.25rem;
}

I hope this helps.

Keep it up.

Hey good job completing this challenge

Keep up the good work

Your solution looks great however I think the content to the right of the card needs some margin from the left using margin-left.

In terms of accessibility issues simply wrap all your content between main tags

In terms of validation errors your links need text so simply provide text within the enclosed tags

I hope this helps

Cheers Happy coding 👍