CSS justify-content: space-between not being recognized - html

Question

I am very new to html and css. I do know that in my text editor (brackets) the text changes color for keywords, but the "space-between" is not being recognized despite it being one of the choices. The other ones work. (like "center")
Basically what i'm trying to do is spread out my 3 images horizontally across the page when the page is at least 768px. Here is a portion of my index:
<main class="main-area">
<section class="box">
<article class="boxes">
<a href="#">
<figure class="featured-image">
<img src="images/single-blue.jpg">
<div class="box-text">
<h2 class="box-title">Blue Firework</h2>
<p class="box-blurb">Image subtext</p>
</div>
</figure></a>
</article>
<article class="boxes">
<a href="#">
<figure class="featured-image">
<img src="images/single-purple.jpg">
<div class="box-text">
<h2 class="box-title">Purple Firework</h2>
<p class="box-blurb">Image subtext</p>
</div>
</figure></a>
</article>
<article class="boxes">
<a href="#">
<figure class="featured-image">
<img src="images/single-orange.jpg">
<div class="box-text">
<h2 class="box-title">Orange Firework</h2>
<p class="box-blurb">Image subtext</p>
</div>
</figure></a>
</article>
</section>
</main>
<!-- Close the main section -->
I think normally people combine their stylesheets but my teacher wants me to do them separate. Here is a css file:
/*
primary style sheet
*/
#import url('CSS/accessibility.css');
#import url('CSS/reset.css');
#import url('CSS/typography.css');
#import url('CSS/navigation.css');
#import url('CSS/masthead.css');
#import url('CSS/banner.css');
#import url('CSS/boxes.css');
#import url('CSS/levels.css');
here is another css file:
/******** Boxes Stylesheet ********/
.box{
margin: 0 0 1em;
border-bottom: 1px solid #000;
}
.box img {
border: 2px solid #000;
}
.box-title {
font-family: 'Nunito', sans-serif;
font-weight: 300;
color: black;
padding: 0;
}
.box p {
font-family: 'Nunito', sans-serif;
color: black;
font-size: 1.2em;
}
.box a {
color: #000;
text-decoration: none;
display: block;
padding: .25em;
}
#media screen and (min-width: 768px){
.boxes {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.box {
width: calc(33.333333% - .5em);
}
}
The text is white (not recognized) after justify-content: and also after Flex-wrap:
Thank you for your time. (first post so tell me if I posted wrong)

Answer 1

Your selectors are inverted in the CSS media query.
Change:
#media screen and (min-width: 768px){
.boxes {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.box {
width: calc(33.333333% - .5em);
}
}
For:
#media screen and (min-width: 768px){
.box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.boxes {
width: calc(33.333333% - .5em);
}
}
Code Snippet:
/******** Boxes Stylesheet ********/
.box {
margin: 0 0 1em;
border-bottom: 1px solid #000;
}
.box img {
border: 2px solid #000;
}
.box-title {
font-family: 'Nunito', sans-serif;
font-weight: 300;
color: black;
padding: 0;
}
.box p {
font-family: 'Nunito', sans-serif;
color: black;
font-size: 1.2em;
}
.box a {
color: #000;
text-decoration: none;
display: block;
padding: .25em;
}
#media screen and (min-width: 768px) {
.box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.boxes {
width: calc(33.333333% - .5em);
}
}
<main class="main-area">
<section class="box">
<article class="boxes">
<a href="#">
<figure class="featured-image">
<img src="http://placehold.it/100x100">
<div class="box-text">
<h2 class="box-title">
Blue Firework
</h2>
<p class="box-blurb">
Image subtext
</p>
</div>
</figure>
</a>
</article>
<article class="boxes">
<a href="#">
<figure class="featured-image">
<img src="http://placehold.it/100x100">
<div class="box-text">
<h2 class="box-title">
Purple Firework
</h2>
<p class="box-blurb">
Image subtext
</p>
</div>
</figure>
</a>
</article>
<article class="boxes">
<a href="#">
<figure class="featured-image">
<img src="http://placehold.it/100x100">
<div class="box-text">
<h2 class="box-title">
Orange Firework
</h2>
<p class="box-blurb">
Image subtext
</p>
</div>
</figure>
</a>
</article>
</section>
</main>
<!-- Close the main section -->
Not every editor is updated with the latest keywords, don't worry space-between is a valid CSS value for justify-content property. You can check out the accepted values for justify-content here and here.