Заменить clear: both; на display: inline-block;
<ч />
Кроме того, вы объявили тип документа ? Doctype сообщает браузеру, какую версию HTML вы используете, чтобы браузер мог правильно его отобразить.
В верхней части страницы (над тегом <html>) поставить:
<!DOCTYPE html>
При этом используется тип документа HTML5, он допускает довольно гибкий HTML-код и, как мы надеемся, приведет к правильному отображению вашей страницы.
В HTML5 вы можете писать разметку разными способами.
<br> является действительным и так же <br /> новшеством в HTML5 является то, что для пустого div вы можете использовать <div id="emptyDiv" /> или <div id="emptyDiv"></div>
Вы также можете проверить свою разметку HTML.
Служба проверки разметки W3C - это бесплатная служба, которая позволяет загрузить свой код или ссылку на него, а затем выполнить проверку на него и распечатать ошибки / предупреждения. Некоторые предупреждения немного загадочны, особенно для начинающих с HTML, но это не конец света, если у вас есть несколько предупреждений / ошибок, которые любой браузер стоит использовать, как бы «разобраться» и правильно отобразить HTML ( это называется Quirksmode). Некоторые из этих валидаторов немного сложнее / сложнее, чем их следует использовать, поэтому вам придется найти тот, который вам больше всего нравится, и придерживаться его.