Header Section is not Aligned with rest of the content by using flexbox CSS

Issue 1: I wanted to keep the alignment of header section with the Hero Image and Headings , paragraphs . But now the Logo and Navigation is centered and rest of the content is going out from left and right side. How can I move the logo to more on left side and similarly nav section to more on right side? so they are aligned with hero box.

Issue 2: Its about coloring the links of nav section. On my laptop its still showing the blue default color but on the codepen its showing red (that I set but not shown on my laptop) why is that?

If possible can you please write why the error came up in first place? Where I am wrong so I can avoid this in future. I am using VS code on windows 10 with Chrome browser.

Here is the link to my code.

Just a tip, it’s not recommend to put it all together in a div.container with a width of 1300px. Reason being is that it will create a horizontal scrollbar (unless that’s what you’re aiming for). Better to not set width (which by default is 100vw) or just remove that div altogether.

As for the header, you can try setting its width to 100vw or 100%.

As the a tags, you don’t need to add :link to select them. Just write a.

1 Like

You have added margin: 0 auto to all elements using a universal selector. That is not a good idea.

  1. Remove margin: 0 auto from your universal selector.

  2. Use max-width on the .container and give it the auto margin.

1 Like

Thanks a lot both of you.