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  href="#">
       <div >
       <img src="img/pokemon_logo.png" height="40%" width="50%" alt="Pokemon Logo" />
     </div>

     <h1><strong>Gen 1 Pokemon</strong></h1>

     <div >
       <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 >
     <input  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!

CodePudding user response：

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;
}

CodePudding user response：

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;
   }`

CodePudding user response：

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 >
  <p>