Created boxes in CSS Flexbox aren't showing up

Question

I am working on recreating a landing page layout from the Odin Project. I've mostly created it, but the small boxes I've created aren't showing up. The GitHub is here: https://github.com/smgriffis/landing-page The CSS code I've written is:

.info-box {
    width: 70px;
    height: 70px;
    border-radius: 7px;
    margin: 10px;
    border-color: 5px solid blue;
    background-color: white;

}

And HTML:

<div class="wrapper">
<div class="second-section" id="second">
<h6>Services we offer</h6>
<div id="service-info">
    <ul class="service-info">
        <li><div class="info-box" id="box1"></div></li>
        <li>Conceptual planning</li>
    </ul>
    <ul class="service-info">
        <li><div class="info-box" id="box2"></div></li>
        <li>Developmental editing</li>
    </ul>
    <ul class="service-info">
        <li><div class="info-box" id="box3"></div></li>
        <li>Copyediting</li>
    </ul>
    <ul class="service-info">
        <li><div class="info-box" id="box4"></div></li>
        <li>Proofreading</li>
    </ul>
    </div>
</div>
</div>
</div>

and I'm not sure why, but those boxes do not appear in the layout. Could anyone shed some light on this?

Answer 1

Change "border-color" to just "border"