I'm having trouble creating a border around a round SVG image with the class "lock feature". When I try to add the border in the CSS element ".lock feature", the text "feature" stays white and the border doesn't show up in the browser. However, if I change the selector/element from ".lock feature" to "img" and then apply the border properties, the border appears. Can anyone provide assistance?
<style>
html,body{
font-family: 'Open Sans',sans-serif;
text-align: center;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#page-wrapper {
position: relative;
}
#header {
position: fixed;
top: 0;
left: 0;
height: 90px;
background-color: rgba(0, 0,0,.5);
width: 100%;
}
.logo {
float: left;
}
#header-img {
height:100%;
}
nav {
position: relative;
float: right;
height: 10vh;
margin: 35px 0px;
height: 20px;
margin-right: 25px;
}
@media(max-width:453px){
#nav-bar {
position: absolute;
width: 100%;
top: 100%;
margin:0;
}
#nav-bar li {
display:block;
background-color: rgba(0,0,0,.5);
padding: 5px;
}
}
li {
display: inline-block;
list-style: none;
}
a {
text-decoration: none;
margin: 20px;
color: white;
}
.container {
width: 100%;
margin-top: 200px;
}
.grid {
display: flex;
margin: 0 auto;
width: 80%;
margin-top: 40px;
margin-bottom: 40px;
}
.description {
text-align: left;
margin: auto 18px;
width: 70vw;
}
h2 {
margin-bottom: 11px;
}
.lock feature {
border-style: 3px solid black;
}
</style><!DOCTYPE type>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img id="header-img" src="http://image.discountsoff.com/dryKPIu3fpLUjodbv1n2Q2EWdkA=/logos/aersf.com.png">
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#products">Products</a></li>
<li><a class="nav-link" href="#about us">About Us</a></li>
</ul>
</nav>
</header>
<div class="container">
<section id="features">
<div class="grid">
<img class="lock feature" src="https://svgur.com/i/9VC.svg" alt ="features">
<div class="description"><h2>Lock Feature</h2><p>Aer started in 2014 as a crowdfunding project that combined a gym bag and an office bag into one simplified design. That project has grown into a mission to simplify the way you carry so you can worry less about what's on your back and focus more on what's ahead. Whether you're traveling between the office and the gym, or from San Francisco to Tokyo, there's a bag in our collection that's perfectly suited for your journey.</p>
</div>
</div>
<div class="grid">
<img class="zip feature" src="https://svgur.com/i/9Vu.svg" alt="full bag">
<div class="description"><h2>Zip Feature</h2><p>The Active Collection is a line of modern gym/work bags designed for the city professional. Go from the office to the gym and everywhere in between.</p>
</div>
</div>
<div class="grid">
<img class="lap top feature" src="https://svgur.com/i/9UJ.svg" alt="about us">
<div class="description"><h2>Lap Top Feature</h2><p>Inspired by the city, we create minimalist bags that balance smart features with a clean, architectural style.</p>
</div>
</div>
</section>
</div>
<div class="container">
<section id="products"></section>
<iframe width="560" height="315" src="https://www.youtube.com/embed/qeFOYlHmyGE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="container">
<section id="about us"></section>
</div>
</div>
</body>
</html>