Having trouble with the container named mst missing the bg class. Wondering if it's related to margin, padding, or a display property that I may have overlooked. Also, seeking advice on creating a more mobile-friendly component. Any help is appreciated in advance!
}html,
body {
padding: 0;
margin: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Playfair Display", Playfair Display, Sans-serif;
}
h1 {
color: var(--mainText);
font-family: "Playfair Display" Helvetica, sans-serif;
text-shadow: 4px 4px #f5f5f5;
}
h2 {
color: var(--secondaryText);
font-family: "Playfair Display", Arial, Sans-Serif;
text-shadow: 6px 6px #b9b6b6;
}
p,
li,
span,
label,
input,
textarea {
font-family: "Playfair Display", Helvetica, sans-serif;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
h1 {
font-size: 5em;
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 1em;
}
p {
font-size: 16px;
}
...
.right div {
margin-bottom: 40px;
}<div class="mst-ctn">
<div class="sch-ctn">
<div class="sch-header"><h2>Schedule a walk</h2></div>
</div>
<div class="bg-ctn">
<div class="flex-ctn">
<div class="left">
<p><b>Meet and Greet</b></p>
<p>20min | Free</p>
</div>
<div class="right">
<p>
This is a free visit done before any services start. It is for
everyone to get acquainted, for you to show us your pet’s routine,
etc. and for us to answer any questions ...
</p>
<div>
<form action="">
<button class="sch-btn" type="submit">Book Now</button>
</form>
</div>
</div>
</div>
</div>
</div>