I explain above, I gave all the texts a margin of 20px, and my footer was floating in the air and below it a blank space appeared. I tried to enlarge its size and the white space became larger. If you could help me I would appreciate it.
Here is a photo of what it looks like: https://isstatic.aoverflow.com/Ootdi.png
HTML code
<footer>
<div class="footer">
<div class="copyright-notice">
<h3>GRUPO SCOUT 1279 PAPA FRANCISCO</h3>
<a type="button" href="" target="_blank" class="btn-floating footer waves-effect waves-light">
<i class="fab fa-facebook-f"></i>
</a>
<a type="button" href="" class="btn-floating footer waves-effect waves-light" target="_blank">
<i class="fab fa-instagram"></i>
</a>
<p>© Copyright </p>
</div>
</div>
</footer>
CSS code
.footer {
max-width: 1280px;
margin: 0 auto;
float: none;
padding-top: 80px;
padding-bottom: 86px;
}
.copyright-notice {
color: #30343a;
margin: 0;
margin-bottom: 0px;
padding: 0;
text-align: center;
transition: all .2s ease-in;
cursor: default;
}
The HTML5 standard indicates that there can be a footer in the document or for each section.
Then you have to remove the footer from the contact section, look at the image. Footer number 1 is inside the footer and footer 2 is outside. You have to leave it as the last image.