Why is the background image not showing up in the left column? I've applied the CSS background-image to .left but it's still not working. Any suggestions on what might be causing this issue? It seems like a small problem, but it's really bothering me.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row">
<div class="column left">
</div>
<div class="column right">
<i class="fa fa-unlock fa-2x" aria-hidden="true"></i>
<h2> You're In </h2>
<p> You deserve it. Unlock your welcome discount and be the first to know about leaked artwork & exclusive offers. </p>
<h2> GET $20 NOW </h2>
<form class="omnisend-subscribe-form"><input type="text" class="omnisend-subscribe-input-email" placeholder="Email address" style="width: 100%; height: 50px; display: block; color: #a0a0a0; font-size: 16px; padding: 6px; border: 1px solid #cfcfcf; margin-bottom: 5px; outline-width: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" /><input type="submit" value="I want my $20 off" style="width: 100%; height: 50px; display: block; color: #ffffff; font-size: 16px; padding: 8px; margin-top: 18px; background-color: #f47268; border-width: 0px; -webkit-border-radius: 0px; -moz-border-radius: 3px; border-radius: 0px; outline-width: 0px; cursor: pointer;" /></form>
</div>
</div>
* {
box-sizing: border-box;
}
.row {
display: flex;
border: 1px solid grey;
align-items: center;
}
.column {
text-align: center;
}
.left {
width: 50%;
background-image: url("https://cdn.shopify.com/s/files/1/0196/2898/2334/files/MU6.jpg?2930");
}
.right {
width: 50%;
padding: 10px;
}
@media screen and (max-width: 600px) {
.left {
display: none;
}
.right {
width: 100%;
}
}