Results summary component solution

Hello again, I have some suggestions:

You should use the body element to center the component, and leave the <main> element containing only the two columns. Also use a max-width to prevent the component from getting too large. I haven't done this challenge myself, so I can't help you with exact dimensions. [1]

Using the main element to center it causes the two columns to move away on larger screens.

This line of code is strange: grid-template-columns: repeat(4, 1fr);. Those are four columns, if you observe carefully, you can see that there are only two columns, the "blue" column and the "white" column. It can be perfectly repeat(2, 1fr);. [2]

body { /* NOTE [1]*/
    min-height: 100vh;
    place-content: center;
    display: grid;
}

main {
    /* min-height: 100vh; */
    max-width: 900px;
    display: grid;
    /* place-items: center; */
    /* grid-template-columns: repeat(4, 1fr); */    /* NOTE [2]*/
    grid-template-columns: repeat(2, 1fr);
}

.result {
    /* NOTE: This is not necessary, just by using "repeat(2, 1fr);" you are creating two columns of exactly the same width.*/
    /* max-height: 60%; */
    /* grid-column: 2/3; */
    . . . 
}

.summary {
    /* max-height: 60%; */
    /* grid-column: 3/4; */
} 

The other issue on mobile devices is different. I feel like the breakpoint ("375px") for switching between views is too small.

Lectures:

• A Complete Guide to Grid
• Grid by Example

Happy coding!