Akhosh
@Akhosh
Полый верстальщик

Как убрать пустое пространство в навигации?

615277549b741870696810.png
615277617fc50915366609.png

.container {
    max-width: 1440px;
    margin: 0 auto;
}
.wrapper {
    
}
.center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav {
    position: absolute;
    z-index: 50;
    width: 100%;
}
.nav__row {
    margin-top: 45px;
    display: flex;
    justify-content: space-between;
}
.nav__logo {
    display: flex;
    color: white;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
}
.nav__logo:hover{
    color: blue;
    transition: 0.5s;
}
.nav__logo img {
    margin-right: 17px;
}
.nav__menu {
    /* background-color: red; */
    display: flex;
    flex-flow: row wrap;
}
.list__menu {
    display: flex;
    margin: 0;
    padding: 0;
}
.link__menu:hover{
    color: blue;
    transition: 0.5s;
}
.btn {
    width: 154px;
    height: 52px;
    background: white;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 4.2px;
    cursor: pointer;
}

.list__menu li {
    display: inline-block;
    margin-right: 51px;
}
.list__menu li a {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 10px;
}


<div class="nav">
                <div class="container">
                    <div class="nav__row">
                        <div class="nav__logo center">
                            <img src="img/graph.svg" alt="logo">
                            <h2>SEO-Xpert</h2>
                        </div>

                        <div class="nav__menu">
                            <ul class="list__menu center">
                                <li class="item__menu"><a href="#" class="link__menu">Products</a></li>
                                <li class="item__menu"><a href="#" class="link__menu">Services</a></li>
                                <li class="item__menu"><a href="#" class="link__menu">Features</a></li>
                                <li class="item__menu"><a href="#" class="link__menu">Plans & Pricing</a></li>
                                <li class="item__menu"><a href="#" class="link__menu">Sign in</a></li>
                            </ul>
                            <button class="btn">SIGN UP</button>
                        </div>
                    </div>
                </div>
            </div>
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
@MEDIOFF
Python Developer
Размер контейнера уменьшите
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
LenovoId
@LenovoId
I want, women not to get sick
в фотошопе сотрите .... научить как ластиком пользоваться ?
Ответ написан
@ForSureN1
frontend dev
Посмею предположить что у родителя задано свойство justify-content: space-between, что позволяет разместить элементы на максимальное расстояние друг от друга к краю контейнера, смените данное свойство на flex-start, и тогда они все будут прижаты друг к другу
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы