I was reading about flexbox, and was also watching youtube videos

Hi Federico,

Your website looks great. One thing I'll add to your code is the overflow property. Your website right now have a scroll bar on the right, which isn't necessary. To get rid of that, just add to the body:

overflow:hidden;

Hope it helps.

Hi @federico-madrid, 👋

Congratulations on posting your first solution! 🥳

To fix the accessibility issue in the accessibility report (see above ⬆️), you will have to change your h3 elements to something else. The report is saying that if you use an h1 element on your page, the next heading element you can use is h2, which is a valid increment of +1.

However, I would recommend that you use a <span class="metric-count"> element. Also, I would do something similar for the <p> tags and replace them with <span class="metric-label">. Try this:

<div class="metrics">
    <div class="metric">
        <span class="metric-count">80K</span>
        <span class="metric-label">Followers</span>
    </div>
    <div class="metric">
        <span class="metric-count">803K</span>
        <span class="metric-label">Likes</span>
    </div>
    <div class="metric">
        <span class="metric-count">1.4K</span>
        <span class="metric-label">Photos</span>
    </div>
</div>

...with this CSS:

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
}

So, the reason for replacing those elements with <span> tags is for accessibility. The metric-count and metric-label are not headings or paragraphs. They are just generic pieces of small text that are okay to be given a generic element like <span>.

I hope this is helpful. 😊