Flexbox applied to <nav> element is failing. Help?

HTML-CSS
#1

Hey all,

I’m trying to build my own personal website right now and I’m trying to do it mobile-first.

The first thing I’d like to make responsive is my nav element. The html for that looks like this:

<header>
        <nav id="nav">
        <!-- id="nav" for specificity -->
            <ul>
                <li>Home</li>
                <li>Projects</li>
                <li>Thoughts</li>
                <li>Resources</li>
                <li>Contact</li>
            </ul>
        </nav>
    </header>

I want that nav element to take up 50% of the width of the screen at any screen size (not worrying about orientation atm).

How I’ve been trying to add responsive design:

        #nav ul {
            max-width: 50%;
            display: flex;
            justify-content: flex-start;

This is the only styling I have on li elements within #nav:

#nav li {
    padding: 0 1em;
    border-right: 1px solid #383838;
    display: inline;
    font-size: 3rem;
}

root-element within html is set to 62.5% (for accessibility purposes)

What am I doing wrong? Am I supposed to be applying display: flex; to the nav element itself? When I view my webpage at the size of an iPhone 5, the ul takes up the entire width of the #nav container.

#2

Ah, I just realized. I have this behavior showing correctly at full browser width. But I have no media queries set yet telling nav to behave the same way (maintain max-width of 50%) at different screen sizes. Could this possibly be the issue?

#3

Okey first no need for using an id for nav, you can just call it in CSS like this:
nav { property:value}

I would advice to give the parent element, that is the nav, the width of 50%;
rather than to the ul, because the list can overflow, that is if there’s not enough space it will use more space.

image
image1429×158 12.8 KB

Hope it helps.