I am working on a grid container and I want to change the background color of the second row within it.
Check out my Fiddle
This is the HTML markup:
<div class="totalContainer totalContainer__space">
<div class="totalContainer__text">
<label>Test test test test test</label>
</div>
<div class="totalContainer__text totalContainer__result">
<label><strong>50</strong></label>
</div>
<div class="totalContainer__row totalContainer__text">
<label>Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2 Test2</label>
</div>
<div class="totalContainer__text totalContainer__row totalContainer__result">
<label><strong>20</strong></label>
</div>
</div>
Here's the SCSS code snippet:
.totalContainer {
display: grid;
grid-template-columns: 4fr 1fr;
margin-top: 30px;
border: 1px solid rgba(72, 82, 93, 0.8);
border-radius: 12px;
&__row {
background-color: #E5E5E5;
}
&__space {
padding: 10px 0 10px 10px;
margin-left: 160px;
margin-right: 58px;
}
&__text {
font-size: 13px;
padding: 10px 0 10px 0;
}
&__result {
text-align: right;
}
div:nth-child(2),
div:nth-child(4),
div:nth-child(6) {
margin-right: 20px;
}
}
The issue I am facing is that the background does not cover the entire width of the container
https://i.sstatic.net/tHar9.png
I want the background color to fill the empty spaces marked in red, but setting the width to 100% for the row class did not work. Any suggestions on how I can achieve this?
Update: I managed to remove the right space by changing margin-right: 20px; to padding-right: 20px;
However, I cannot eliminate the left space as I still need room for the text. The background seems to be affected by the padding property as well, making it challenging to solve this issue.