Why is the flex box not flowing in the column direction? - html

Question

I have been trying to make this 'About Us' tab flow in the column direction (horizontal) but it seems to always flow in the row direction (vertical) even if the media query condition is false.
#import url('https://fonts.googleapis.com/css2?family=Allura&family=Josefin+Sans:wght#300&display=swap');
body{
font-family: 'Josefin Sans', sans-serif;
text-align: center;
}
.container {
background-color:rgb(223, 223, 223) ;
padding: 20px;
}
h1 {
font-family: 'Allura', cursive;
}
#mvc {
display: flex;
}
.mvc-tabs{
background-color: #ff812c;
padding: 20px;
margin: 10px;
flex: 1 1 0;
}
.abt-us {
background-color:rgb(223, 223, 223) ;
}
#media screen and (max-width:600px) {
#mvc {
display: flex;
flex-wrap: wrap;
}
}
<div class="container">
<h1>About Us</h1>
<div class="mvc">
<div class="mvc-tabs">
<h3 class="heading">Our Vision</h3>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed veritatis assumenda, consequuntur quasi expedita similique saepe et eius sit debitis optio alias placeat fugit nobis, perspiciatis nihil dolorum a nostrum!
Odit est voluptatum eaque quam laudantium alias fugit, corrupti, sunt reprehenderit nam numquam, voluptate suscipit eum velit sed consequatur voluptas tempore distinctio. Vel dolor repellendus sequi quasi veniam tempore vitae!</p>
</div>
<div class="mvc-tabs">
<h3 class="heading">Our Mision</h3>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed veritatis assumenda, consequuntur quasi expedita similique saepe et eius sit debitis optio alias placeat fugit nobis, perspiciatis nihil dolorum a nostrum!
Odit est voluptatum eaque quam laudantium alias fugit, corrupti, sunt reprehenderit nam numquam, voluptate suscipit eum velit sed consequatur voluptas tempore distinctio. Vel dolor repellendus sequi quasi veniam tempore vitae!</p>
</div>
<div class="mvc-tabs">
<h3 class="heading">Our Core Values</h3>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed veritatis assumenda, consequuntur quasi expedita similique saepe et eius sit debitis optio alias placeat fugit nobis, perspiciatis nihil dolorum a nostrum!
Odit est voluptatum eaque quam laudantium alias fugit, corrupti, sunt reprehenderit nam numquam, voluptate suscipit eum velit sed consequatur voluptas tempore distinctio. Vel dolor repellendus sequi quasi veniam tempore vitae!</p>
</div>
</div>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed veritatis assumenda, consequuntur quasi expedita similique saepe et eius sit debitis optio alias placeat fugit nobis, perspiciatis nihil dolorum a nostrum!
Odit est voluptatum eaque quam laudantium alias fugit, corrupti, sunt reprehenderit nam numquam, voluptate suscipit eum velit sed consequatur voluptas tempore distinctio. Vel dolor repellendus sequi quasi veniam tempore vitae!</p>
</div>
It suddenly started to behave like this and I don't know why. I started to close all the ways with another CSS script to affect it but it didn't work.

Answer 1

You have
#mvc {
display: flex;
}
But you didnt have id="mvc" in your HTML. It should looks like this, and flex items will be in a row.
.mvc {
display: flex;
}

Answer 2

it looks like you are using # for mvc when it has the class "mvc". Also, flex-direction should be used but it's round the other way to how you'd expect.
.mvc {
display: flex;
flex-direction: row;
}