Центрирование div, откуда появляется раскрывающееся меню ⇐ CSS

[Anonymous]

В настоящее время я пытаюсь создать раскрывающееся меню для мобильного дизайна своего веб-сайта. Меню должно появиться под моим логотипом, но элемент div, из которого открывается раскрывающееся меню, не совпадает с логотипом, и когда я пытаюсь переместить этот элемент управления, это вызывает проблемы с позиционированием логотипа. Я хочу, чтобы раскрывающееся меню располагалось из центра заголовка независимо от размера экрана.
Вот CSS, соответствующий вопросу:
Общий CSS:

Код: Выделить всё

#header {
height:7em;
background:black;
display: flex;
align-items: center
}

Мобильный стиль:

Код: Выделить всё

h1 {
font-size: 3em;
text-align:center;
padding: 0;
margin: 0;
}

#shadowBox {
width:100%;
touch-action: manipulation;
text-align:center;
display: flex;
justify-content:center;
}

#header {
flex-wrap:wrap;
}

.dropdown {
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 1em;
border: none;
outline: none;
background-color: black;
font-family: inherit;
margin: 0;
padding: 0;
}

.dropbtn {
border: none;
outline: none;
background-color: black;
}

.dropdown-content {
position: absolute;
background-color: black;
min-width: 10em;
box-shadow: 0em 0.5em 1em 0em rgba(0,0,0,0.2);
z-index: 1;
opacity: .85;
top:7em;
}

.dropdown-content a {
float: none;
color: white;
padding: 0.75em 1em;
text-decoration: none;
display: grid;
text-align: center;
width: 8em;
margin:0;
}

.dropdown-content a:hover {
background-color: #3c0025;
transition: 0.5s;
}

.dropdown-content a:hover {
color: #21f6c2;
}

.dropdown-content a:active {
color: #d4f621;
}

.dropdown:hover .dropdown-content {
display: grid;
}

.hidden {
display: none;
}
}

/* Mobile Fixing */
@media (max-width: 931px) {
.dropdown {
display: inline-block;
}

#links {
display: none;
}

.dropdown-content {
display: none;
}

.dropdown:hover .dropdown-content {
display: inline-block;
}
}

А вот соответствующий HTML:

Код: Выделить всё

[url=/#]home[/url]
[url=/abt]about[/url]
[url=/com]commissions[/url]
[url=/img]portfolio[/url]
[url=/cv]cv[/url]
[url=/crd]credit[/url]




LOGO


[url=/#]home[/url]
[url=/abt]about[/url]
[url=/com]commissions[/url]
[url=/img]portfolio[/url]
[url=/cv]cv[/url]
[url=/crd]credit[/url]

Я не уверен, что весь CSS необходим или его нужно включить в мой вопрос. Я хочу убедиться, что включил все, что мне может понадобиться.< /p>
Я попробовал настроить тип отображения, чтобы посмотреть, позволит ли это переместить элемент div, из которого происходит раскрывающееся меню, но это перемещает логотип, и в настоящее время я не уверен, как сделать div с моим логотипом и раскрывающимся элементом div из наложения. По этой причине я также попробовал justify-content: center и align-content:center, но не думаю, что сделал это правильно.
Аналогично я также пробовал напрямую перемещать раскрывающееся меню содержимого, но это приводит к проблемы, когда размер окна изменяется, и я бы хотел, чтобы оно оставалось в центре независимо от размера экрана.
Я даже пробовал использовать , несмотря на то, что оно устарело, и это тоже не сработало, как ни странно .
Я открыт для любых предложений о том, как это исправить, которые помогут мне удовлетворить мои потребности. Спасибо вам огромное!

Подробнее здесь: https://stackoverflow.com/questions/789 ... comes-from