Results Summary Component Challenge

Hi, great job on your third application!

Bryan Li gave a pretty good overview of why the summary results are not aligning to the right . Here is another way you could resolve this issue:

<div class="icon1">
   ...
   <div style="margin-left: auto">
      61 / <a style="color: gray;">100</a>
   </div>
</div>

Here we are wrapping the html in a div and adding a margin-left of "auto". This will align just the bit of code wrapped in the div to the right. I do think it is worth your time learning flex, but this requires a bit more knowledge. Working with margins might be an easier topic to pick up for beginners.

There are a few things I would like to point out as well:

• The solution is not responsive. Responsive design is a big part of web development. When you have time, you should get more familiar with this topic. Media queries and mobile first design are good places to start
• The markup for the scores (i.e 61/100) could be better. It is not semantic to use a tags in this way. a tags are used to denote a hyperlink
• Suggested update

<p>61 / <span style="color: gray;">100</span></p>

I know there are some styles in your style sheet that would add unwanted padding to the above solution. Can you think of a way to make the above code work with these styles?

Overall, great job! Keep it up!

Seems to me like the "num/100" are further from the right edge the shorter the word is. Here's where your problem lies: .icon1 > p, .icon2 > p, .icon3 > p, .icon4 > p { padding-right: 80px; padding-left: 8px; }

Each of your <p> elements will always push the "number/100" text 80 px to the right, so the shorter the word inside <p> is, the further from the right edge "number/100". The problem is that you're pushing the "number/100" elements a set amount of pixels to the right of the <p> elements. You need to find a way to have "number/100" always pushing against the right edge, instead of pushing X amount of pixels to the right of <p>. Hope this helps!

Hi there! Your site looks pretty good!

To answer your question: There is gradual spacing on the right of your 100 because of the text on the left side of the box. If you look, you'll notice that the amount of space on the right side of the 100 corresponds to how long/short the words are on the left-hand side of the box.

The words on the left side are getting shorter: Reaction -> Memory -> Verbal -> Visual. This results in there being more space on the right side of the 100 because you used:

.icon1 > p,
.icon2 > p,
.icon3 > p,
.icon4 > p {
    padding-right: 80px;
    padding-left: 8px;
}

When spacing things out you should choose carefully as to what to use. Sometimes its bettter to use flexbox, gridbox, margin, padding, etc. In this case. I think you should restructure some of your html so that you can use flexbox for this. For example changing your boxes into:

<div class="icon1">
   <div>
      <img src="/assets/images/icon-reaction.svg">
      <h2>Reaction</h2>  
   </div>
   <div>
        <p>80 / <span style="color: gray;">100</span></p>
   </div>
</div>

and your css to:

.icon1{
   width: 200px; // you can change this value to your liking
   display: flex;
   justify-content: center;
   align-items: center;
    background-color: hsla(0, 100%, 67%, 0.2);
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
}

.icon1 h2{
   color: hsl(0, 100%, 67%);
}

One last suggestion is to make "Your Results" surrounded by <h1> tags instead of what you have right now. The headers should explain your page's contents.

Hope you find this useful 👍