Почему я не могу разместить это изображение на правой стороне страницы?

Question

В настоящее время я работаю над этой блог-страницей по этому URL:

https://cyhcode-webpage.cyh1368.repl.co/project.html

Я хочу разместить изображение на правой стороне текстовые описания.

Я пробовал перемещать их все (описание и изображение), но это могло бы создать некоторые проблемы, если бы я хотел добавить некоторые другие описания или тексты.

Есть ли способ это исправить?

Answer 1

Вы можете избежать float и использовать flex вместо этого. Этот метод также позволяет избежать необходимости clear. Вот пример:

li { 
 display: flex; 
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1rem;
}


li h2 {
  padding: .5rem 1rem .5rem .5rem; 
  flex: 1;
}

li img {
  max-width: 200px;
}

/* Presentational */

ul, li { list-style: none;  padding: 0; }

<ul>
  <li>
    <h2>This is one of the best games I've made in python using Turtle Graphics. </h2>
    <img src="http://placekitten.com/200/300" alt="">
  </li>
  <li>
    <h2>Instructions: </h2>
    <img src="http://placekitten.com/200/150" alt="">    
  </li>
  <li>
    <h2>Use WASD or arrow keys to move you(yellow square).</h2>
    <img src="http://placekitten.com/200/150" alt="">    
  </li>
  <li>
    <h2>You get a point if you eat a food(white square).</h2>
    <img src="http://placekitten.com/200/150" alt="">    
  </li>
  <li>
    <h2>Don't let the computer(orange square) eat too much!</h2>
    <img src="http://placekitten.com/200/150" alt="">    
  </li>
</ul>

jsFiddle