**Hola
estoy diseñando una pagina web y al momento de querer agregarle el botón de whatsapp a mi pagina, los elementos de riego automatizado, paneles solares y luz de emergencia se movieron, y no quedan de la forma correcta, me aconsejaron ver mis versiones de código antes y después del error, pero no hay nada diferente o si pase a llevar otro elemento, todo esta en orden al parecer, pero no logro entender porque se mueven cada vez que ingreso el código del botón mencionado.**
<nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://api.whatsapp.com/send?phone=56989639573&text=Hola%21%20Quisiera%20m%C3%A1s%20informaci%C3%B3n%20sobre%2012 voltios%20." class="float" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>
</nav>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#page-top"><img src="assets/img/logoone.jpg" alt="..." /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars ms-1"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link" href="#services">Souciones</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Portafolio</a></li>
<li class="nav-item"><a class="nav-link" href="#about">Nosotros</a></li>
<li class="nav-item"><a class="nav-link" href="#team">Equipo</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container">
<div class="masthead-subheading">Bienvenidos a DoceVoltios!</div>
<div class="masthead-heading text-uppercase">El futuro es en doce volts</div>
<a class="btn btn-primary btn-xl text-uppercase" href="#services">Quiero saber más</a>
</div>
</header>
<!-- Services-->
<section class="page-section" id="services">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Soluciones</h2>
<h3 class="section-subheading text-muted">Que disminuyen consumo hídrico y energético</h3>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-tint fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">Riego Automatizado</h4>
<p class="text-muted">Trabajamos a 12V con sistemas inteligentes programables, que actúen con sensores o se activen a distancia.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-solar-panel fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">Paneles Solares</h4>
<p class="text-muted">La energía del sol está a disposición la utilizamos para sistemas autonomos de bajo consumo energetico.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-lightbulb fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">Luz de Emergencia</h4>
<p class="text-muted">La luz a 12V no parpadea si la batería está baja, nos permite prescindir de inversor y es independiente al alumbrado publico.</p>
</div>
</div>
</div>
</section>
por favor si me pueden ayudar se los agradezco.