Как можно выстроить блоки и элементы на странице относительно друг друга, такие как панели навигации и логотипы?

Для этого можно использовать CSS и HTML для создания нужной структуры и позиционирования элементов. 

Пример кода HTML для хедера страницы:

```html
<header>
    <div class="logo">
        <img src="logo.png" alt="Logo">
    </div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>
```

Пример CSS для стилизации элементов и их позиционирования:

```css
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.logo {
    display: inline-block;
}

nav ul {
    display: flex;
}

nav ul li {
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #333;
}
```

В данном примере мы используем свойство `display: flex;` для хедера, чтобы выстроить логотип и навигационное меню на одной горизонтальной линии. Свойство `justify-content: space-between;` распределяет пространство между элементами, а `align-items: center;` выравнивает элементы по центру по вертикали.

Таким образом, при правильном использовании CSS и HTML можно легко выстроить блоки и элементы на странице относительно друг друга, соблюдая дизайн макета в Figma.

Класс. slider__containter и nav одинаковой ширины надо сделать. 
 Например 
 
. containter {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}