Questions on CSS and Styling - html

Question

I want to add a second Pokemon Ball on the same line and make it on the far right side and I will remove the search function as its only Gen 1.
I have two Pokemon Balls now, here is the image:
Here is my source code in HTML for the images:
<a class="navbar-brand" href="#">
<div class="floatLeft">
<img src="img/pokemon_logo.png" height="40%" width="50%" alt="Pokemon Logo" />
</div>
<h1><strong>Gen 1 Pokemon</strong></h1>
<div class="floatRight">
<img src="img/pokemon_logo2.png" height="40%" width="50%" alt="Pokemon Logo"/>
</div>
<!-- <img src="img/pokemon_alt.png" height="20%" width="20% "alt="Pokemon Logo"> -->
</a>
<!-- This is where we can search for pokemon -->
<!-- <form class="form-inline">
<input class="form-control mr--2" id="search-pokemon" type="search" placeholder="Search for Pokemon" aria-label="Search">
</form> --> </nav>```
This is what I have in CSS:
.floatRight{ float:right; clear:right; margin-left:1400px; }```
I have tried align, float and all that cannot seem to figure it out.
Any help would be appreciated!

Answer 1

try to not use floats, they are a bit "old" for todays standards.
For this purpose you can use Flexbox - more about it here:
Flexbox
.navbar-brand {
display: flex;
align-items: center;
justify-content: space-between;
}

Answer 2

Remove the float right and float left styles and class from html.
set the style
`a {
display: flex;
justify-content: space-between;
align-items: center;
}`

Answer 3

You could use display: flex; and justify-content: space-between; to achieve this
.content {
margin: 50 auto;
border: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="content">
<p>🌹</p>
<p>🌹</p>
</div>