@JIH7
Posted
Looking good overall! One issue I noticed, I believe you're trying to select the body element with the selector .body. The dot at the begginning makes this a class selector. So it would work for <body class="body"></body>. Changing it to just body would apply the styles in the way I think you're intending to. I downloaded your code and tried that and it put the container nice and centered on the screen.
I've also noticed you have a white box shadow on the container, causing it to blend in with the white background. When a color is added, the borders of .container extend past the content. To get the box shadow working properly, try giving .container a proper width instead of a full screen width of 1440px. Something like 736px is more akin to the design. You will of course have to change the widths of the objects in between to avoid them squishing down since you're using percentages, but the page will look better because you did it. You probably also want to change the justify-content of .container to space-between. The flex rules you've set up on body will keep the container centered on the screen for you.
You've got a solid start here and with some tweaks it could look really great! After that, try challenging yourself to learn CSS media queries to make it look good on mobile! That way, you can selectively apply CSS styles based on the screen size. Here's an article about that. Remember to hit f12 and open your browsers dev tools, then select different screens under "dimensions" at the top to see how it would look on different phones and tablets. Best of luck! Feel free to respond with any clarification questions
