Flexbox children don't always expand as wide as they could/should - css

Question

Two of the link buttons in my nav have long-ish names, and they're text-wrapping and becoming two lines tall even though (as far as I can tell) there's nothing stopping them or the nav from growing wider. Have I just missed something?
The code is quite long, so you'll probably be happier viewing the codepen than reading it here. It's so long because I'm afraid something I've overlooked in my global styling or my media query changes is to blame for this bug.
EDIT: This one was an easy answer. I misunderstood selector precedence. I thought media queries took precedence over everything (except inline). So I didn't realize the nav a rule in my media query was not overwriting the nav > section > a in my base CSS. A good lesson about always respecting CSS selector precedence.
HTML
<section>
<nav>
<a id="NSFW_deactivateFilter" onClick="worksafeOff()" href="#">Worksafe Mode: On</a>
<h2 onClick="showMenu()">Category Filters</h2>
<div></div>
<section id="nav_Orientation">
<a id="Horizontals" href="#">Horizontals</a>
<a id="Verticals" href="#">Verticals</a>
</section>
<div></div>
<section id="nav_Category">
<a id="Biltmore" href="#">Biltmore</a>
<a id="Commercial" href="#">Commercial / Product</a>
<a id="Fashion" href="#">Fashion & Glamour</a>
<a id="Invocation" href="#">Invocation</a>
<a id="NewOrleans" href="#">New Orleans</a>
</section>
</nav>
</section>
CSS
/** GLOBAL **/
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
color: inherit;
font-size: 16px;
font-style: inherit;
font-weight: 400;
line-height: 1em;
margin: 0 auto;
padding: 0;
position: relative;
text-align: center;
text-decoration: none;
z-index: 1;
}
a {
text-decoration: underline;
}
body {
background-color: #444;
color: #ccc;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-style: normal;
}
body > section {
background-color: #333;
width: 100%;
max-width: 1440px;
}
/** NAV **/
nav {
align-items: center;
background-color: #222;
display: flex;
flex-flow: column nowrap;
margin-bottom: 10px;
width: 95%;
max-width: 480px;
}
nav a, nav > h2 {
border: 1px solid #666;
margin: 0 0 5px 0;
padding: 5px;
}
nav a {
text-decoration: none;
}
nav > a, nav > h2 {
width: 100%;
}
nav > a {
background-color: #666;
}
nav > div {
display: none;
}
nav > section {
align-items: center;
display: none;
flex-flow: row wrap;
justify-content: space-between;
margin: 0;
width: 95%;
}
nav > section.nav {
display: flex;
}
nav > section > a {
display: inline-block;
width: 48%;
}
/** MEDIA QUERIES **/
#media (min-width: 1000px) {
nav {
display: inline-flex;
flex-flow: row nowrap;
width: auto;
max-width: none;
}
nav a {
margin: 0 5px;
width: auto;
}
nav > h2 {
display: none;
}
nav > div {
background-color: #666;
display: block;
height: 20px;
margin: 0 5px;
width:1px;
}
nav > section {
display: flex;
flex-flow: row nowrap;
width: auto;
}
}

Answer 1

Remove width: 48%; rule from nav > section > a.
See codepen.