I’m using float to keep the navigation on the left with flex on the non navigation content. For some reason when I apply position: fixed; to the navigation both get blended. What seems to be the problem?
My #navbar li has a padding on the left side, but I can’t determine where it’s coming from. Any clues?
Lastly, I appreciate any feedback on this page. Thank you!
That is how position: fixed works. It removes the element from normal document flow just like position: absolute. So the element will not interact with other elements on the page. You can give the main element the same amount of margin-left as the width of the nav.
It is the default style on the <ul> element. It gets both margin and padding added by the browser styles by default.
BTW, you really do not need to use float for this.
Try removing position: fixed and see what happens.
Because the nav is position: fixed it will not contribute to the document flow. Its width will not push down any other content but just overlap it. So nav and main will always remain on the same line even if/when there is no room for both (they will just overlap each other).