Responsive Results Summary Component

Congrats on completing the challenge!

I really like your Semantic HTML and clear naming.

In terms of design, I like your changes to background-color and the more saturated rows :) it just fits. I'd just recommend giving your elements a little more white-space to breath, especially the rows are a little squished right now.

To your question, how to center .score:

• I'm guessing you tried margin: 0 auto; since you used margin: 0 27%;. The auto keyword basically tells the browser to just deal with the exact number itself. Since <section> is a block-element, it has width: 100%;. Therefore, the browser decides, no margin is needed, because there is no whitespace left. Now, if you give the circle an absolute width equal to your height, the .score box doesn't take up the entire horizontal space anymore and the browser can center the box using margin: 0 auto;.
• Just remember: for margin: 0 auto; to work, the element needs to be a block-element and it needs a width.
• In the spirit of flexbox, another solution could have been to turn the entire .result into a flex-column and use align-items: center;. Half of that you already did in your .summary.
• Yet another solution is to turn the .score into a inline-block using display: inline-block. This way text-align: center; applies to .score as well, since text-align does not only align text, but all inline-elements.

Some nitpicking:

• align-self: center; in .score and btn doesn't do anything because it's not a flex/grid-element.
• <btn> is not the correct html tag for buttons (<button>). While it works, similar to Semantic HTML, it's important for screenreader and SEO to use the correct tags. 'btn' is usually the abbreviation used for the button class-name, so that's probably why you confused the two.
• flex-direction: row; in .container doesn't do anything, because it's the default value. I guess you thought that the flex-direction: column; is passed down to the .container. Usually only typography (e.g. font-size, color, font-family...) is passed down to the children.
• transition-duration: 0.4s; on its own in your btn doesn't do anything. CSS also needs to know which property needs a transition, in your case background-image. If you want to know more about transitions, check out MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/transition).
• Your media query is beautifully minimalistic. In mobile, you shouldn't center your component anymore → remove those properties from your body-tag.
• as @Mahmoudamin11 already said: cursor: pointer; on the button would be nice. But changing <btn> to <button> would fix that too.

As a general tip, try checking your browser dev-tools for any unnecessary CSS. This way you have fewer lines in CSS, which makes everything more readable.

Everything else is looking good, :) if you want to further improve, I'd recommend checking out CSS-Variables (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) next.

Thanks to your contribution I learned, that linear-gradient() is basically an image, and instead of background you can also use background-image. Who would have thought.

Be proud of yourself for completing the challenge and submitting it!

Keep on going and you'll be on a good path :)

Nice job : ) in the hover of the button try to make make it smooth by giving it => transition: 0.3s; and make the cursor: pointer; that will be much better

• And the background is white : )
• Awesome work never stop