I want the background colour of my footer to span 100% of the webpage but it ends up wider than my navigation bar and img which are both also set to 100%. Also, I get a gap between the footer and image which I have corrected by using bottom: -76px but was wondering if there's a better solution that'll be more responsive.
main img {
width: 100%;
height: 600px;
margin: 0;
border: none;
}
footer {
background-color: #DE002B;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 0px;
margin-right: 0;
position: absolute;
margin: 0;
border: none;
bottom: -76px;
width: 100%;
}
footer p {
color: black;
}<main>
<img src="Photos/Prague 1.jpg" alt="A picture of Prague.">
</main>
<footer>
<p id="footer">Company Registration Number: </p>
<p id="footer">VAT Number:</p>
</footer>
