So, I am able to get a horizontal nav bar one way but not the other, and I am getting confused as to why. Strange things happen when I use
border: solid 10px black;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
display:inline says, "Hey, treat this element exactly as if it was a piece of text, like an
a element." You can't specify the width of an inline element; it just takes up as much space as the text inside it, which is why it's not working for your
ul. 99% of the time, you only want to use
display:inline on actual text. You probably don't want it on a
ul, since a
ul is a container for text, and isn't actually text itself.
display:block makes the element expand to fill up the width of its container, unless you specify a
width. So if you put
display:block on your
ul, it will expand to fill the width of your
display:flex is a fairly new feature that has the same behavior as
display:block, but then lots of other cool stuff too with you're not currently using, like making everything inside the element expand to fill up available space.
display:inline-block is like
display:inline in that elements "flow" with the text around them, and like
display:block in that you can specify the element's width.
If this was 5 years ago, before most web browsers supported
display:flex, you'd probably want
display:block on the
display:inline-block on the
li. But today,
display:flex is a great option for nav bars.