Чтобы разместить текст в верхней части документа и добиться равномерного распределения элементов в блоке (например, в `header`), вы можете использовать CSS-свойства Flexbox. Ваше начальное решение уже близко к правильному. Я подскажу вам, как это можно сделать правильно.
### Пример структуры HTML
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Пример</title>
</head>
<body>
<header>
<div class="logo">Логотип</div>
<nav class="navigation">
<a href="#">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</nav>
</header>
</body>
</html>
```
### CSS для `header`
```css
body {
margin: 0;
padding: 0;
}
header {
display: flex; /* Используем Flexbox для размещения элементов */
justify-content: space-between; /* Равномерное распределение элементов с отступами между ними */
align-items: center; /* Вертикальное центрирование элементов */
padding: 10px 20px; /* Отступы внутри header */
background-color: #f8f8f8; /* Фоновый цвет для наглядности */
}
.logo {
font-size: 24px; /* Размер шрифта для логотипа */
}
.navigation a {
margin: 0 15px; /* Отступы между ссылками */
text-decoration: none; /* Убираем подчеркивание */
color: #333; /* Цвет текста */
}
```
### Объяснение
1. **`display: flex;`** — Вы задаете элементу `header` поведение flex-контейнера.
2. **`justify-content: space-between;`** — Элементы внутри `header` равномерно распределены по доступной ширине, с отступами между ними.
3. **`align-items: center;`** — Элементы внутри `header` выравниваются по вертикали по центру.
4. **`padding: 10px 20px;`** — Задает внутренние отступы, чтобы элементы не прилипали к краям.
5. **Сделал элементы в навигации (ссылки) равномерно распределенными** при помощи `margin`.
Такой подход позволяет добиться желаемого результата: элементы в `header` будут находиться в верхней части страницы и равномерно распределены по горизонтали.