@Aleksey_ADm1

Div блоки, проблемы с отступами, как исправить?

Привет, есть вот такой макет:

<div class="header">
            <h3><a href="#">DevDoc</a></h3>
            <div onclick="openMenu()" class="toggle-btn">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div id="menu">
                <ul>
                    <li>
                        <a href="#">Главная</a>
                    </li>
                    <li>
                        <a href="#">Документация</a>
                    </li>
                    <li>
                        <a href="#">Контакты</a>
                    </li>
                    <li>
                        <a href="#">Поддержка</a>
                    </li>
                    <li>
                        <a href="#">О нас</a>
                    </li>
                </ul>
            </div>
        </div>
        
        <div id="cards">
            <div id="card"></div>
            <div id="card"></div>
            <div id="card"></div>
            <div id="card"></div>
        </div>


Внизу есть блок с 4-мя блоками див, я их центрирую, но дело в том, что они находятся в самом верху под меню, а должен быть отступ от него

#cards {
                    display: block;
                }
                
                #card {
                    width: 80%;
                    height: 150px;
                    background: #66FCF1;
                    margin: 10px auto 10px;
                }
                
                .header {
                    width: 100%;
                    height: 45px;
                    background: #0B0C10;
                    position: fixed;
                }
                
                .header h3 {
                    color: white;
                    margin-top: 11px;
                    margin-left: 11px;
                }
                
                .header h3 a {
                    text-decoration: none;
                    color: #D1E8E2;
                }
                
                .header h3 a:hover {
                    color: #fff;
                }
                
                .toggle-btn span {
                    display: block;
                    width: 25px;
                    height: 3px;
                    background: #D1E8E2;
                    margin: 4px 0;
                }
                
                .toggle-btn {
                    position: absolute;
                    right: 10px;
                    top: 10px;
                }
                
                #menu {
                    width: 100%;
                    height: 100vh;
                    background: #272727;
                    margin-top: 12px;
                    text-align: center;
                    position: fixed;
                    left: 100%;
                    transition: all 350ms;
                    -moz-transition: all 350ms;
                    -webkit-transition: all 350ms;
                }
                
                #menu.active {
                    left: 0;
                }
                
                #menu ul li {
                    padding: 20px 20px;
                    list-style: none;
                }
                
                #menu ul li a {
                    text-decoration: none;
                    color: #D1E8E2;
                    font-size: 1.7em;
                }
                
                #menu ul li a:hover {
                    color: #fff;
                     border-bottom: 1px solid #fff;
                }


Как можно исправить?
  • Вопрос задан
  • 84 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

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