блок налазит на шапку, я не знаю как это решить
.main {
font-family: minecraft;
background-color: rgba(0, 0, 0, 0.6);
margin: 10px;
padding: 40px;
border-radius: 15px;
user-select: none;
color: white;
text-align: center;
position: absolute;
justify-content: center;
}
@media (min-width: 1000px) {
.main {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
@media (max-width: 660px) {
.img {
width: 350px;
margin: 10px;
}
.main {
padding: 10px;
}
.input {
font-size: 16px;
}
}
html:
<!DOCTYPE html>
<html>
<head>
<title>Главная страница</title>
<script src="assets/dist/js/bootstrap.bundle.min.js"></script>
<link href="assets/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-#aaa" aria-label="Tenth navbar example">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Главная</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/join">Дискорд</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/donate">Донаты</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/leaders">Лидеры</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/helper">Заявка на хелпера</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="main">
<h2 style="margin-bottom: 30px"><a style="color: #ee4082;">СПОНСОР</a> НА МЕСЯЦ — <a style="color: yellow">99 RUB</a></h2>
<h5 class="donate-text">+ Выделение в списке выше роли <a style="color: cyan">Топ 10 [2020]</a></h5>
<h5 class="donate-text">+ Красивая роль которая отличается от всех</h5>
<h5 class="donate-text">+ Доступ смотреть АНАЛИТИКУ сервера</h5>
<h5 class="donate-text">+ Доступ разговаривать на стримах вейрена</h5>
<h5 class="donate-text">+ Выбор цвета ника на баннере — <a style="color: red">НЕДОСТУПНО</a></h5>
<h5 class="donate-text">+ СВОЯ роль + смена цвета и ника — <a style="color: yellow">!setrole</a></h5>
<h5 class="donate-text">+ Добавление эмодзи через — <a style="color: yellow">!addmoji</a></h5>
<h5 class="donate-text">+ Удаление СВОЕГО эмодзи — <a style="color: yellow">!remoji</a></h5>
<h5 class="donate-text">+ <a style="color: yellow">30к</a> серверной валюты в экономике</h5>
<h5 class="donate-text">+ <a style="color: yellow">Защита</a> от банов и киков</h5>
<h5 class="donate-text">+ <a style="color: yellow">Доверие</a> со стороны администрации</h5>
<input class="input" placeholder="Промокод (НЕОБЯЗАТЕЛЬНО)">
<br><br>
<button class="button" type="submit">Перейти к покупке</button>
</div>
</body>
</html>
