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.
So, I am sure the pros will have a much better answer than me but this is how I see it.
Html default styling is already to the left but when you added flexbox, flex-direction: column , and margin-left: 20vw; then it just pushed the rest of the content to the right of the nav bar.
That is why you are getting the navbar on the left and other content on the right.
Also, I don’t know if you need this here
display: block;
text-align: left;
When I deleted it nothing happened. So you might not need it. Plus I was under the impression that the nav element was already block level.
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).