Sean Sean - 4 months ago 46
CSS Question

How to Get Menu Items on Same Row

If you look at the menu, you'll notice that all of the menu items are aligned left within a container in a single column. But what I want is for them to spread out evenly in a single row, and then to collapse into a hamburger menu at tablet and mobile size.

I know that

is by default a block element, so I tried giving the
with the id
and the class of
a style of


But nothing's happening.

I also tried assigning


to the div that encompasses the ul, which has a class of
, but that didn't work either. Once I'm able to distribute the menu items evenly in a single row, I'll be able to create the hamburger menu. This is a perfect example of how we want the menu to behave.


Close! The list item (li) elements need to have display: inline-block;, not the list itself (ul).

This will work:

.menu-item {
  display: inline-block;
  margin-right: 10px; /* add a gap between items */