div is not responding to display:block; - html

Question

I have this set up where I'm switching the display to be responsive, I have two set of nav menus one is displayed and the other is hidden on page load, once the screen is 480px or below the main site nav menu acts as expected and is hidden, but the mobile nav wont show up.
here is my code below and thanks in advance.
#media screen and (max-width: 480px) {
.mn-nav {
display: block;
}
.main-site-nav {
display: none;
}
}
<div class="container">
<div class="mn-nav" style="display:none;">
<div class="col-md-12">
<select width="100%" name="m-nav">
<option value="select">Profile Menu</option>
<option value="social">Social</option>
<option value="profile">My Profile</option>
<option value="media">My Media</option>
</select>
</div>
</div>
<div class="main-site-nav">
<div class="col-md-3">
<button id="social-button" style="width:100%;" class="btn btn-primary">Social</button>
</div>
<div class="col-md-3">
<button id="profile-button" style="width:100%;" class="btn btn-primary">My Profile</button>
</div>
<div class="col-md-3">
<button id="media-button" style="width:100%;" class="btn btn-primary">My Media</button>
</div>
<div class="col-md-3">
<a href="/logout">
<button style="width:100%;" class="btn btn-danger">Logout</button>
</a>
</div>
</div>
</div>

Answer 1

The style is applied, but your inline display style takes precedence over the one in the style sheet, making it redundant. Remove the inline style and add it in the stylesheet before your media query:
HTML
<div class="mn-nav" style=""><!-- Inline style removed -->
<div class="col-md-12">
<select width="100%" name="m-nav">
<option value="select">Profile Menu</option>
<option value="social">Social</option>
<option value="profile">My Profile</option>
<option value="media">My Media</option>
</select>
</div>
</div>
CSS
.mn-nav{
display: none;
}
#media screen and (max-width:480px) {
.mn-nav {
display:block;
}
.main-site-nav {
display:none;
}
}
Bootply

Answer 2

This happens because you set display: none; as inline style.
html:
<div class="mn-nav">
<div class="col-md-12">
<select width="100%" name="m-nav">
<option value="select">Profile Menu</option>
<option value="social">Social</option>
<option value="profile">My Profile</option>
<option value="media">My Media</option>
</select>
</div>
</div>
css:
.mn-nav {
display: none;
}
#media screen and (max-width:480px) {
.mn-nav {
display: block;
}
.main-site-nav {
display: none;
}
}
Your inline style has priority over the styles you set in your css file. Therefore display: block is not being applied.

Answer 3

The problem is that in <div class="mn-nav" style="display:none;">, the style has a higher priority than a style in a CSS style sheet.
Move it to
.mn-nav{
display:none;
}
and you are good.
Reference: CSS which takes precedence, inlne or the class?