All solutions

I don't know why but my solution is showing up different here. This has happened for the third time. Can someone explain why this is happening?

Please tell me how i could have improved the solution

I just want to ask that if i use a min-height or width on the main container,why don't the children take percentage values for their heights or widths? Also, i dont know why but the solution is showing up different on the comparison slide than the actual one

I just wanted to ask why the children of the three main containers do not take percentage values for their heights and widths if I use min-widths and heights for the three main containers.

I wanted to ask that upon applying min -widths and heights on the three main containers, why don't the children of the container seem to take percentage values for their own heights and widths?. Also, I tried to make the activation states of the button with use of the :hover, but during that time I tried to make the extra border that shows during hover with an outline as inset and it worked but half of the outline shows a different color than the one I have chosen, and I need help to understand why.

I am too confused; the page is not responsive even when I use min-widths or max-widths or percentage values and the flex properties like justify-self don't work at all and the mobile page just doesn't react the way I want it to when I apply media queries

Hello, I mainly have only two questions : How do I stop the text from overlapping with each other when I reduce the window size and can this be achieved through flex-box properties?

Could someone tell me how I could have made this code more efficient and whether I have used semantic HTML well?

Please checkout my first beginner project : The QR Code Challenge. Can someone explain how would I make it so that when i shrink the page thecontent stays in the box and does not overflow