Product Landing Page - Logo in header not centered

1

I’m working on the header for the webpage however, the logo is not properly centered.

The logo is slightly to the right and I can’t figure out why it’s doing this.

2

Welcome, jamie.

Whilst I have not figured out why the logo is ever-so-slightly off to one side, here are some things for you to note:

  1. CodePen’s environment is not an exact replica of how things will appear in deployed environments.
  2. CodePen only wants the content you would put within the body element in the HTML section. Do not have your head stuff here. You do not need to (cannot) link to your CSS.
  3. Add external elements to your CodePen, by clicking on the gear icon on the HTML editor section.

Hope this helps.

3

I normally use VS Code to do my work and have just pasted my code into Codepen for the sake of this thread, hence the CSS link in the HTML head.

Even when I open the HTML file locally, the logo is still off to the right. This is not just a Codepen environment issue.

4

I think all you are seeing is the space distribution between elements of different widths. If all the links had the same amount of text the image should be centered.

You can try giving all the link elements the same width, find the widest link and give that width to all the links (115px should work).

5

Thank you, this has resolved the issue!