Results Summary Component, vanilla CSS plus bad flex

Hi, congratulations on completing this project!

• In the CSS file, on the ".section" selector, you used the "justify-content: space-between;" property. This adds an equal space between flex elements and this should be removed, because you don't want the elements to be equally spaced, in this case.

• You can group the last two elements (the current score and the percent) in one paragraph with a class of "detailed score", and set a "margin-left : auto;" to this paragraph. This property will align them to the right. Instead of using two separated paragraphs for each element, you can wrap the percent into a <span> element and style it separately, like so:

<p class="detailed score">80 <span class="hundred"> / 100</span></p>

You can find out more about how to use auto property on margins to align elements in a flexbox, here :

1. https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/
2. https://css-tricks.com/how-auto-margins-work-in-flexbox/

• Then, you should set a margin left of 1em on the h3 element, to add a bit more space between it and the icon.

• Regarding the button, you can fix it like so: Remove the div that wraps the button element. And now, the button is a "child" of the ".summary" container. You should:

1. set the ".summary" selector to be a flex container. (display: flex)
2. set the direction of the flex to be on the column not on rows ( "flex-direction: column")
3. and last but not least: don't forget to center the text inside the button element!

That's it. I hope it helped you to solve the problem! Good luck on your learning journey!

Change the div with the class button into a real button element, it should not be a div, and give it a width of 100%

To make it two to the left and two to the right, do it this way, wrap the the two element in div tags and the give the parent div a flex

<div class="reaction section">
<div class="left">
<img >
<h3>Reaction</h3>
</div>
<div class="right">
<p>80</p>
<p>100</p>
<div>
</div>
</div>

.left, .right { display: flex}

look dear you should see div as box. things and elements that should be together put them inside single div like you have image and text put them inside one div and text that left put that inside another div then on parent element add flex with justify-content that will work