I am faced with a design challenge on my home page. I want to add some spacing between the buttons so they are not too close to each other, but for some reason margin-top and margin-bottom properties are not working as expected. Can you help me figure out why?
index.html
<div class="large-hero">
<img class="large-hero__image" src="./assets/images/workplace-hi-dpi.jpg" alt="">
<div class="large-hero__btn-content">
<a class="btn btn--home" href="./job-seeker.html">Job Seekers</a><br>
<a class="btn btn--home" href="./employer.html">Find Talent</a>
</div>
</div>
_large-hero.css
.large-hero {
border-bottom: 5px solid $mainRed;
position: relative;
&__image {
display: block;
opacity: 0.85;
}
&__btn-content {
background-color: yellow;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
text-align: center;
}
}
_btn.css
.btn {
&--home {
text-decoration: none;
color: #FFF;
background-color: rgba($mainRed, .70);
padding: 0.5rem 2rem;
border-radius: 37.5px;
font-size: 1.25rem;
margin-bottom: 5rem;
@mixin atMedium {
padding: 1.2rem 5rem;
border-radius: 37.5px;
font-size: 1.75rem;
margin-right: 5rem;
margin-left: 5rem;
}
}
}