Created boxes in CSS Flexbox aren't showing up-CodePudding

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 >
<div  id="second">
<h6>Services we offer</h6>
<div id="service-info">
    <ul >
        <li><div  id="box1"></div></li>
        <li>Conceptual planning</li>
    </ul>
    <ul >
        <li><div  id="box2"></div></li>
        <li>Developmental editing</li>
    </ul>
    <ul >
        <li><div  id="box3"></div></li>
        <li>Copyediting</li>
    </ul>
    <ul >
        <li><div  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?

CodePudding user response：

Change "border-color" to just "border"