header {
background: blue;
color: white;
width: 100%;
}
.container {
background: green;
text-align: center;
width: 100%;
height: 100px;
transform: skew(0, -10deg);
color: white;
position: relative;
top: 55px;
}
.container .home{
position:absolute;
bottom:0;
}<header class="header">
<div class="logo">
<i class="fab fa-accusoft"></i>
<span class="title">DreamCoding</span>
</div>
<section class="container">
<div class="home">
<div class="title">Alphabet</div>
<div class="text">
abcdefg
</div>
</div>
</section>I am facing a situation where I have the header box and the container box. My challenge is to make sure that the container box is covered by the header box. However, I keep encountering an issue where the container box gets covered by the header box repeatedly.
English is not my first language, so I hope I made myself clear. Regardless, thank you in advance for your help.