I recently developed a component with a title and a background color meant to cover the entire page, but it seems to have a top margin that I can't seem to remove. Additionally, I created a footer component that should always stay at the bottom of the page and adjust its position based on the content added. However, the content overlaps the footer and even crosses over it. How do I go about fixing this issue?
Background CSS:
<style scoped>
*{
margin: 0%;
padding: 0%;
}
.background{
position: relative;
height: 88vh;
background-color: #3B3B3B;
}
.title{
border: 1px solid #707070;
border-left: none;
border-right: none;
}
.title h2{
text-align: left;
color: #B16DFF;
padding-top: 0.8em;
font-size: 2em;
padding-bottom: 0.5em;
margin-left: 1.5em;
font-weight: 600;
}
Footer CSS:
<style scoped>
.container{
width: 100%;
margin: 0%;
position: absolute;
bottom: 0%;
background-color: #232323;
}
.container h2{
font-weight: bold;
color: #B16DFF;
font-size: 1.5rem;
padding-top: 1.1em;
}
.container #text{
position: relative;
float: left;
padding-left: 5em;
text-align: justify;
padding-bottom: 2em;
}
.container p{
font-weight: 600;
font-size: 0.8rem;
color: white;
}
.container #title{
padding-bottom: 0.4em;
}
.container #description{
padding-bottom: 1.3rem;
}
.container #images{
position: relative;
padding-top: 3em;
float: left;
padding-left: 5em;
}
.container ul li{
display: inline-block;
padding-left: 2em;
}