1. Вирівняйте код і створіть класи для елементів, очі випадають з таким працювати.
2. Атрибут style зазвичай стосується вмісту блоку, а не його положення. Тобто вам треба або зробити style для body, або (значно краще) додати div навколо цих двох - і, наприклад, зробити йому
style="display: grid; grid-template-columns: 50vw 50vw;"
(якщо ви любите grid, але можна і іншими).
▼Що каже інформаційна м'ясорубка
Вітаю! Проблема у вашому HTML-коді полягає в тому, що два блоки <div> (лівий і правий) існують один під одним, бо ви не задали їм спільного контейнера з горизонтальним розміщенням.
Щоб розмістити правий блок на одному рівні з лівим, потрібно:
Помістити обидва <div> у спільний контейнер.
Задати цьому контейнеру горизонтальне розміщення дочірніх елементів, наприклад через display: flex.
Ось виправлений код:
html
Копіювати
Редагувати
<html>
<head>
<meta charset="UTF-8">
<script src="scripts/include.min.js"></script>
</head>
<body>
<div style="display: flex; justify-content: space-between; margin: 0 3%;">
<div style="text-align: left; display: grid;">
<a href="index.htm">Головна</a>
<a href="agreements.htm">Перелік угод</a>
</div>
<div style="text-align: right; display: grid;">
<a href="login.htm">Логін</a>
<a href="#" onclick="window.print();">Роздрукувати</a>
</div>
</div>
</body>
</html>
Що змінилось:
Додано спільний контейнер з display: flex.
justify-content: space-between розводить лівий і правий блоки по краях.
margin: 0 3% — додано відступи зліва і справа.
Якщо потрібне вертикальне вирівнювання (наприклад, щоб посилання були по верхній лінії), можна ще додати align-items: start до контейнера.
???? Якщо хочеш, можу ще допомогти зі стилями або зробити адаптивну версію.
