First, here is the codepen link:
So I want to put:
- An image
- An h1 homepage title
- A bunch of links
for my navigation bar on the header.
I want them all to be vertically aligned at the bottom of the header, with the image+h1 on the left side, and the menu list on the right side.
I’ve been playing around with the floats, display type, flexbox, etc, but still just can’t figure out how to make the menu list aligned to the bottom.
I somehow manage to get the the image and h1 in the right place, but the menu list just won’t align at the bottom, aligned with the image & h1 no matter what I tried.
I tried editing the menu container using margin, padding, align-self with no change.
I’ve been searching for answers on google and trying it myself for hours still with no answer on what I did wrong.
Also, if you resize the window and scroll down, you’d notice that somehow the header’s opacity is not 100%.
I did make the background-color into an rgba before, but I changed it to rgb afterwards, but the opacity still doesn’t change back to 100%.
Would totally appreciate it if anyone could tell me what I did wrong and what the right properties that I should use are for these problems.
Thank you in advance!