In my layout, I have a simple grid consisting of 2 columns with borders and some content on the left side. Unfortunately, there is some extra space due to padding that I want to remove.
Despite trying to use box-sizing: border-box;
, the issue persists.
https://i.sstatic.net/3jMEY.png
Here is the HTML:
<div class="totalContainer totalContainer__space" *ngIf="selectedMenuItem === menu[3]">
<div class="totalContainer__text">
<label><strong>Annual</strong> Test Test </label>
</div>
<div class="totalContainer__text totalContainer__result">
<label><strong>80</strong></label>
</div>
</div>
And here are the SCSS styles:
.totalContainer {
display: grid;
grid-template-columns: 2fr 1fr;
margin-top: 30px;
border: 1px solid rgba(72, 82, 93, 0.8);
border-radius: 12px;
box-sizing: border-box;
&__row {
background-color: #E5E5E5;
}
&__space {
padding: 10px 0 10px 140px;
}
&__text {
font-size: 13px;
}
&__result {
text-align: right;
}
}