Html CSS justify内容：未识别的内容之间的间距

我对html和css非常陌生。我知道，在我的文本编辑器（括号）中，文本会改变关键字的颜色，但“空格”不会被识别，尽管它是一种选择。其他的可以工作。（如“中心”）

基本上，我要做的是在页面至少768px的情况下，将我的3幅图像水平分布在页面上。以下是我索引的一部分：

<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 -->

下面是另一个css文件：

    /*
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');

    /******** 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);
    }
}

“对齐内容：”和“柔性换行”之后的文本为白色（无法识别）：

---

谢谢你抽出时间。（第一篇文章，如果我发错了，请告诉我）

您的选择器在CSS媒体查询中被反转

更改：

@media screen and (min-width: 768px){
    .boxes {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .box {
        width: calc(33.333333% - .5em);
    }
}

用于：

---

代码片段：

/*******框样式表********/
.盒子{
边缘：0.01米；
边框底部：1px实心#000；
}
.box img{
边框：2倍实心#000；
}
.方框标题{
字体系列：“Nunito”，无衬线；
字体大小：300；
颜色：黑色；
填充：0；
}
.方框p{
字体系列：“Nunito”，无衬线；
颜色：黑色；
字体大小：1.2米；
}
.方框a{
颜色：#000；
文字装饰：无；
显示：块；
填充：.25em；
}
@媒体屏幕和屏幕（最小宽度：768px）{
.盒子{
显示器：flex；
证明内容：之间的空间；
柔性包装：包装；
}
.盒子{
宽度：钙（33.333333%-.5em）；
}
}

---

您的选择器在CSS媒体查询中反转

更改：

@media screen and (min-width: 768px){
    .boxes {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .box {
        width: calc(33.333333% - .5em);
    }
}

用于：

---

代码片段：

/*******框样式表********/
.盒子{
边缘：0.01米；
边框底部：1px实心#000；
}
.box img{
边框：2倍实心#000；
}
.方框标题{
字体系列：“Nunito”，无衬线；
字体大小：300；
颜色：黑色；
填充：0；
}
.方框p{
字体系列：“Nunito”，无衬线；
颜色：黑色；
字体大小：1.2米；
}
.方框a{
颜色：#000；
文字装饰：无；
显示：块；
填充：.25em；
}
@媒体屏幕和屏幕（最小宽度：768px）{
.盒子{
显示器：flex；
证明内容：之间的空间；
柔性包装：包装；
}
.盒子{
宽度：钙（33.333333%-.5em）；
}
}

所有这些样式表都在伤害我的眼睛。普林-是Jigglypuff吗？：）考虑添加一个工作演示，所以问题可以被复制。你可以使用一个或一个第三方IDE，比如jsfiddle.net或codepen.io。所有这些样式表都伤害了我的眼睛。Purin-是Jigglypuff吗？：）考虑添加一个工作演示，所以问题可以被复制。您可以使用或第三方IDE，如jsfiddle.net或codepen.io。@TylerH完成，谢谢您的建议，您是正确的。@TylerH完成，谢谢您的建议，您是正确的。