While the layout of your page closely resembles the design specification, there are discrepancies in every section.
You did well in creating a sticky header, but when you scroll down your page, there is a gap between the top of the header and the viewport:
Because you've assigned a z-index of 1 to the header and to the mission statement, the header gets lost behind it when scrolling:
Although difficult to see, there is an 8px margin applied to the <body> of your page as a default styling from the browser. Because the header is styled with an underline, you may notice this gap on the left side. If you inspect your page through DevTools, you'll find the styling:
In Unit 5, you'll learn to add a reset stylesheet to clear out all of the browser default styling. For this project, if you target the <body> element and set the margin to 0 you'll be able to clear out the default margin around the page, which will also fix the gap above the header. If you only needed to correct that gap, without adjusting the rest of the margin on the body, you can use top: 0 because the header is position: fixed.
Once you scroll down the page, you'll notice that the logo image isn't centered vertically in the header. Good job getting the 10px of separation between the logo and the left side of the viewport (once the margin is cleared out). I encourage you to consider implicit styling and balance in design when building your page. This 10px will be seen in a few other places on this page. Try setting the amount of space between the last link in the navigation and the right side of the viewport to 10px, instead of 20px, to balance what is explicitly set in the redline document. I think you'll find that this more closely resembles the design mock.
The width of the Mission section is explicitly set to 1200px in the redline document:
Although not explicitly set, it appears that the Locations section should also be 1200px in width. You can center both of these sections on the page by setting the margin to auto.
In the Featured Tea section, the names of the teas should be 10px from the bottom of the image, per the design specification:
Default styling of the <h4> here has added a 29.26px margin applied, which you can see through DevTools:
Likewise, the <h2> of the Locations section should be 15px from the top of the address card below, but default styling applied by the browser adds a margin of 27.39px:
This amount of space between the bottom of the Locations section and the start of the contact information isn't explicitly set, but if we again consider balance in our design and try to replace the default 27.39px margin with 10px like we saw before, I think we will find it more closely matches the design specification.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent