I need guidance/help on my product landing page project

Hello, I am currently on one of the challenges for the responsive web design section where I need to build a product landing page. Structurally, I want my page to look like this example in the link below.

Currently, my page looks like this:

Although I pass all but one test(where I have to include a media query), my page looks very unstructured. I suppose my first question would be how do I create a navigation bar at the top of the page that stays put even when I scroll down that includes the logo on the left and headers on the right. For the whole header, I’ve tried position:fixed and top:0px; but the logo won’t stay when I scroll. Also, how do I make the area with all the text information move to the center, Ive tired text-align for the ids they are in but they stay to the right. Also, how do I create the area at the bottom of the example page I mentioned where the prices of each instrument is side by side and in a box. Im ultimately very confused on how to structure my page to look like the example I’ve mentioned. Any help would be appreciated. Thanks.

  • The property is position, not positon.

  • You didn’t close the #nav-bar selector.


I would suggest switching the Syntax Highlighting on Codepen. It will help catch syntax errors.

Go to your Codepen profile settings. Under “Editor Preferences” switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working, the code highlighting will be using different colors. If there are issues you should see code marked in red. That is the new Syntax Highlighting showing you where the problems are.

Press the down arrow to the right of the HTML code box and select “Analyze HTML” then do the same for the CSS. You can also use a validator tool.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.