Technical documentation page . one of the navbar anchors is not aligned with others

Hi everyone.
I have few questions:

  1. navbar menu anchor’s image is not aligned vertically with others… what is wrong and how to fix it ?

  2. Does the navbar move to the right only if I place related html code in front of main text? I thought, that using float makes the element invisible for siblings. Is moving the html nav element above the main element only way to place nav on the left of the page ?

  3. how to shrink the navbar height closer to the bottom of the text?

here is a link to my codepen page:
https://codepen.io/vandr7/pen/ExNLGRZ?editors=1100

Hey, I’m a little bit unclear on the questions so I hope I am answering them the way you want.

  1. your #positioning_of_elements has the wrong class assigned, you want .nav-link but instead it has .nav-text

  2. float does remove the element from normal flow, in that other elements no longer take it into account when calculating where they should be. At the same time it is still a part of flow, where any overlaps are automatically avoided unlike position:absolute. Your navbar has float:left; but if you want it on the right you should use float:right;. Here are some reading on float on MDN.

  3. Instead of height:auto;, try height:min-content

1 Like