CSS Flexbox not working for navigation (mobile screen) - css

Question

First off I am very new to CSS and following an online course.
I am trying to create a navigation bar that changes from row to column when going into mobile. I am using flexbox and #media queries for that however, it seems like my code does not make any change to the navigation direction when going to mobile. Please help! ]
.container {
display: flex;
color: white;
justify-content: flex-end;
}
.box {
width: 90px;
height: 3rem;
margin: 0.5rem;
background-color: black;
text-align: center;
}
.box-four {
width: 100px;
}
#media screen and (max-width: 600px) {
.container {
flex-direction: row;
justify-content: center;
flex-grow: 2rem;
flex-wrap: wrap;
flex-basis: 10%;
}
}

Answer 1

Can't say exactly what problems you are having without seeing some example HTML to work with but at first glance it seems you should be using flex-direction:column for your mobile view.
Note well: What is in the media query is your mobile styles in this case. You can tell because you have specified max-width which means that it will apply to all screen sizes below the width provided (600px).
See the below as an example which incorporates your provided CSS with some basic HTML I made. (Resize the browser window to test).
.container {
display: flex;
color: white;
}
.box {
width: 90px;
height: 3rem;
margin: 0.5rem;
background-color: black;
text-align: center;
}
.box-four {
width: 100px;
}
#media screen and (max-width: 600px) {
.container {
flex-direction: column;
justify-content: center;
flex-grow: 2rem;
flex-wrap: wrap;
flex-basis: 10%;
}
}
<div class="container">
<div class="box">Entry 1</div>
<div class="box">Entry 2</div>
<div class="box">Entry 3</div>
<div class="box">Entry 4</div>
</div>
You can also read more about flex-direction at the MDN Web Docs