Итак, вы забыли закрыть первый тег <iframe> с помощью </iframe>. Затем вы можете обернуть различное содержимое в контейнеры <div></div>, чтобы создать четкую структуру и добавить правильное выравнивание. Я сделал для вас скрипку, которая показывает, как вы можете это сделать:
https://jsfiddle.net/NicolasDurant/xp9wf8t6/
Было бы неплохо, если бы вы могли извлечь свои стили из HTML-файла в отдельный CSS-файл, чтобы все стили были в одном месте.
Существует множество возможностей для выравнивания контейнеров. Я использовал flexbox. Вот полное руководство по этому поводу: https://css -tricks.com / snippets / css / a-guide-to-flexbox /
Одна из наиболее часто используемых библиотек для компоновки и компонентов по умолчанию - это начальная загрузка, вам следует попробовать:
https://getbootstrap.com/