Currently, I am delving into frontend development and honing my CSS skills. In my latest project, I have incorporated a mat card which can be viewed in the linked image https://i.sstatic.net/TEDcg.png.
Below is an excerpt of my code:
<div class="col-4">
<mat-card class="card">
<div class="header">
<div class="content1">Content of My header</div>
<div class="content2">Content of My header</div>
</div>
<button mat-button>MyButton</button>
</mat-card>
</div>
.card {
background-color: red
height: 47vh;
display: flex;
top: 2.5rem;
flex-direction: column;
right: 2rem;
}
.header {
background-color: red;
padding: 3% 0% 1% 3%;
}
Notice how the Header section has empty spaces around it. I aim to completely cover the header with a red color without these gaps. How should I proceed?