I cannot align the footer to the right - html

Question

I would like to know if someone could help me with a CSS topic.
I am creating a page model through CSS, but it turns out that there is a part that does not stay the same as the rest.
It appears as follows:
enter image description here
And it should look like this, like the footer in the following image.
Do you suggest any ideas? I leave here the code that I have used for CSS.
enter image description here
I attach the HTML and CSS code used.
I tried to move the height and width but can't find the solution.
<!--Inicio de pie de página-->
<div class="clearfix"></div>
<footer id="footer">
<div class="wrap">
<div id="menu_footer">
<h5>Menú</h5>
<ul>
<li>Inicio</li>
<li>Blog Personal</li>
<li>Currículum</li>
<li>Contacto</li>
</ul>
</div>
<div id="location">
<h5>¿Dónde estamos?</h5>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3037.4968410733713!2d-3.690925684351!3d40.41999606336424!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42289a4a865227%3A0x98278b3a144a86f1!2sPuerta%20de%20Alcal%C3%A1!5e0!3m2!1ses!2ses!4v1599489227264!5m2!1ses!2ses"
width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
tabindex="0">
</iframe>
<div id="info">
<h5> Desarrollado con</h5>
<p>
<img src="img/html5-badge-h-css3-graphics-multimedia-performance-semantics.png"
alt="Creado con HTML y CSS">
</p>
<h5>Optimizado para</h5>
<p id="browsers">
<a href="#">
<img src="img/firefox-icon.png" alt="Firefox" title="Firefox">
</a>
<a href="#">
<img src="img/chrome.png" alt="chrome" title="Chrome">
</a>
<a href="#">
<img src="img/Opera_256x256.png" alt="Opera" title="Opera">
</a>
<a href="#">
<img src="img/safari.png" alt="Safari" title="Safari">
</a>
<a href="#">
<img src="img/android.png" alt="Android" title="Android">
</a>
<a href="#">
<img src="img/ios.png" alt="Apple" title="Apple">
</a>
</p>
<h5>Autor</h5>
<p>&COPY;Cristina Martínez - acmartinez96.blogspot.com</p>
</div>
</div>
</div>
</footer>
<!--Fin de pie de página-->
</body>
</html>
/FOOTER/
#footer h5
display: block;
background: url(../img/pxgray.png), white;
height: 55px;
letter-spacing: 2px;
text-align: center;
font-family: "BebasNeue";
font-size: 40px;
line-height: 55px;
color: black;
border-radius: 5px;
margin-bottom: 15px;
#footer ul
text-align: left;
margin: 20px;
font-size: 25px;
#footer ul li
margin-top: 10px;
padding: 5px;
border-bottom: 1px solid #cccccc;
#footer ul li a
display: block;
height: 40px;
#footer iframe
width: 100%;
height: 300px;
margin-top: 10px;
border-radius: 5px;
box-shadow: 0x 0px 5px grey;
border: 5px solid white;
}
#footer img
margin-bottom: 15px;
#footer #browsers img{
width: 45px;
Thanks!

Answer 1

Try to use flexbox it's very helpful.
the rendering you request can be done simply this way
<div class="flex">
<div class="ll">Menu</div>
<div class="ll">Map</div>
<div class="ll">Footer</div>
</div>
div.ll {
background: #fff;
margin: 20 auto;
width: 200px;
padding: 50px;
text-align: center;
}
div.flex {
display: flex;
}
You can test it by using sandbox

Answer 2

Instead of a footer, try creating a <div> or <section> and align that to the right.