[Solved] Items not following order in HTML

Sergio Calderon Asks: Items not following order in HTML
So if you go to diartefloral.tech and use cellphone dimension in the “Sobre Nosotros” part of the menu the footer is overlapping an image, i dont know how to fix this. Thats like the most relevant code, I’m using bootstrap, i got the in the morning with the navbar overlapping the footer but i fixed it by adding the body{ padding-top:60px;}

Code:
.principal{
    background-color: rgb(230,219,241);
}

.container >a{
    font-family: Charmonman, serif;font-size: 35px;padding-bottom: -5px;padding-top: 9px;
}


.site-footer
{
  background: linear-gradient(120deg, #7f70f5, #0ea0ff);
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color: white;
  width: 100%;
  position: fixed;
  bottom: 0;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:white;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:white;
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:white
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:0;
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.instagram:hover
{
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
}


@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}


@media (max-width: 700px){
    #logo{
        font-size: 20px;
    }
    .container >button >span{
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 500px){
    #logo{
        font-size: 30px;
    }
    .container >button >span{
        width: 18px;
        height: 18px;
    }
    
}

@media (max-width: 400px){
    #logo{
        font-size: 25px;
    }
    .container >button >span{
        width: 18px;
        height: 18px;
    }
    
}

@media (max-width: 350px){
    #logo{
        font-size: 22px;
    }
    .container >button >span{
        width: 15px;
        height: 15px;
    }
    
}
@media (max-width: 300px){
    #logo{
        font-size: 18px;
    }
    .container >button >span{
        width: 15px;
        height: 15px;
    }
    
}

@media (max-width: 250px){
    #logo{
        font-size: 14px;
    }
    .container >button >span{
        width: 15px;
        height: 15px;
    }
    
}

.imagen{
  padding: 30px;
  display: flex;
  justify-content: center;
}

.imagen >img{
  margin: auto;
  border-radius: 50%;
  height: 120px;
  padding: 20px;
}

body {
  padding-top: 60px;
  padding-bottom: 60px;
}

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../estilos/estilos.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Charmonman&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../estilos/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <title>DiArteFloral</title>
</head>
<body class="principal">
    <nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-white portfolio-navbar gradient navbar-static-top" style="height: 86px;" id="banner">
        <div class="container"><a id='logo' class="navbar-brand logo" href="#" ><i class="fa fa-pagelines"></i>DiArteFloral y Regalos</a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navbarNav" id="boton"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto" id="menu">
                    <li class="nav-item"><a class="nav-link active" href="../index.html">Inicio</a></li>
                    <li class="nav-item"><a class="nav-link" href="./productos.html">Productos</a></li>
                    <li class="nav-item"><a class="nav-link" href="./contacto.html">Contacto</a></li>
                    <li class="nav-item"><a class="nav-link" href="./sobreN.html">Sobre Nosotros</a></li>
                </ul>
            </div>
        </div>
    </nav>
    </br>
    <div class="imagen">
      <div class="imagen">
        <img src="../img/LOGO.jpg" alt="LOGO">
      </div>
    </div>
    <footer class="site-footer">
        <div class="container">
          <div class="row">
            <div class="col-sm-12 col-md-6">
              <h6>Informacion</h6>
              <p class="text-justify">DiArteFloral y Regalos es una empresa enfocada en complacer a las personas brindandoles el mejor servicio y los productos mas bonitos que se puedan crear al gusto exclusivo de cada cliente.</p>
            </div>
  
            <div class="col-xs-6 col-md-3">
              <h6>Categorias</h6>
              <ul class="footer-links">
                <li><a href="">Arreglos</a></li>
                <li><a href="">Eventos</a></li>
              </ul>
            </div>
  
            <div class="col-xs-6 col-md-3">
              <h6>Atajos</h6>
              <ul class="footer-links">
                <li><a href="">Inicio</a></li>
                <li><a href="">Productos</a></li>
                <li><a href="">Contacto</a></li>
                <li><a href="">PSobre Nosotros</a></li>
              </ul>
            </div>
          </div>
          <hr>
        </div>
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-sm-6 col-xs-12">
              <p class="copyright-text">Copyright © 2021 All Rights Reserved by 
           <a href="https://www.instagram.com/sergioxcc/">Sergio Calderon</a>.
              </p>
            </div>
  
            <div class="col-md-4 col-sm-6 col-xs-12">
              <ul class="social-icons">
                <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li> 
                <li><a class="instagram" href="#"><i class="fa fa-instagram fa-lg"></i></a></li>
              </ul>
            </div>
          </div>
        </div>
  </footer>
<script src="https://kit.fontawesome.com/6a4338d571.js" crossorigin="anonymous"></script>
<script src="../estilos/bootstrap.min.js"></script>
<script src="../estilos/theme.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    let boton = document.querySelector('#boton');
    let menu = document.querySelector('#banner');
    let logo = document.querySelector('#logo');
    boton.addEventListener('click', ()=> {
        if(menu.style.height==='86px'){
            menu.style.height='240px'
        }else{
            menu.style.height='86px'
        }
    });
</script>
</body>
</html>

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.