How can I fix a div class not getting styling? - html

Question

You will see below that I attempted to create a divclass for a button - however, for some reason, only that divclass doesn't get any styling.
Please help me out to figure out why ctabutton class doesn't get styling. There were supposed to be borders around. I'm probably missing something very easy to notice - please give me wisdom.
Here is a link to codepen: https://codepen.io/CanYildiz/pen/ExEYmZb
:root {
--black: rgba(0, 0, 0, 1);
--alllports: rgba(8, 116, 183, 1);
--white: rgba(255, 255, 255, 1);
--font-size-xs: 10px;
--font-size-s: 14px;
--font-size-m: 15px;
--font-size-l: 28px;
--font-family-inter: Sans-Serif;
--font-family-lato: "Lato";
}
#import url("https://fonts.googleapis.com/css?family=Inter:400,700|Lato:500");
.container {
align-items: flex-start;
background-color: var(--white);
display: flex;
flex-direction: column;
min-height: 469px;
width: 666px;
border: 1px solid var(--black);
}
.hidden,
.hidden * {
pointer-events: none;
visibility: hidden;
}
.pflichttext {
color: #094e7c;
cursor: pointer;
font-family: var(--font-family-inter);
font-size: var(--font-size-xs);
font-weight: 400;
letter-spacing: 0;
margin-top: 8px;
min-height: 15px;
text-decoration: underline;
width: 666px;
}
.container-1 {
align-items: flex-start;
cursor: pointer;
display: flex;
flex-direction: column;
min-height: 45px;
width: 666px;
}
.ctabutton {
display: inline-block;
align-items: flex-start;
text-decoration: none;
border: 5px solid var(--allports);
border-radius: 4px;
display: flex;
height: 44px;
margin-left: 3px;
margin-top: 8px;
min-width: 106px;
padding: 14px 16px;
}
.cta-text {
color: var(--allports);
font-family: var(--font-family-lato);
font-size: var(--font-size-s);
font-weight: 500;
height: 14px;
letter-spacing: 0;
line-height: 14px;
min-width: 72px;
text-align: center;
white-space: nowrap;
}
.valign-text-middle {
display: flex;
flex-direction: column;
justify-content: center;
}
.image-1 {
height: 312px;
object-fit: cover;
width: 666px;
}
.frame-1 {
align-items: flex-start;
display: flex;
flex-direction: column;
margin-top: 9px;
min-height: 73px;
width: 664px;
}
.description {
color: #595858;
font-family: var(--font-family-inter);
font-size: var(--font-size-m);
font-weight: 400;
letter-spacing: 0;
margin-top: 3px;
min-height: 36px;
width: 664px;
}
.title {
color: var(--black);
font-family: Sans-Serif;
font-size: var(--font-size-l);
font-weight: 700;
letter-spacing: 0;
margin-top: -1px;
min-height: 34px;
width: 664px;
}
<div class="container screen">
<div class="container-1">
<img class="image-1" src="https://cdn.animaapp.com/projects/62b868b9500e6d0650eef4d7/releases/62b868bf500e6d0650eef4d8/img/image-1#1x.png" />
<div class=" frame-1">
<h1 class="title">TITLE</h1>
<p class="description">
Description about the product/service advertise!It is relatively longer than the Title itself.But just long enough to contain extra information
</p>
</div>
<div class="ctabutton">
<a href="clickurl.de" target="_blank">
<div class="cta-text valign-text-middle">CTATEXT</div>
</a>
</div>
<a href="https://demo.de" target="_blank">
<div class="pflichttext">Pflichttext</div>
</a>
</div>

Answer 1

The border style is not being applied because you have the root css variable named --alllports when an extra 'l' and you are trying to reference it by --allports on the class.
you're original code
:root {
--black: rgba(0, 0, 0, 1);
--alllports: rgba(8, 116, 183, 1);
--white: rgba(255, 255, 255, 1);
--font-size-xs: 10px;
--font-size-s: 14px;
--font-size-m: 15px;
--font-size-l: 28px;
--font-family-inter: Sans-Serif;
--font-family-lato: "Lato";
}
when it should be
:root {
--black: rgba(0, 0, 0, 1);
--allports: rgba(8, 116, 183, 1);
--white: rgba(255, 255, 255, 1);
--font-size-xs: 10px;
--font-size-s: 14px;
--font-size-m: 15px;
--font-size-l: 28px;
--font-family-inter: Sans-Serif;
--font-family-lato: "Lato";
}