Элемент div отсутствует в Devtools в определенных браузерах ⇐ CSS

[Anonymous]

В разделе «Герой» на следующей веб -странице у меня есть сетка с двумя столбцами, с целью наличия текста во втором столбце, который будет выдвигаться вправо (как это): < /p>
< P> желаемый эффект < /p>
Мне нужно было что-то в первом (слева) столбце, поэтому я создал элемент Div, предназначенный для пустых (дал ему класс героипти-бокс). Это отлично работает, когда я переносит его из VS -кода, но когда я тестировал его в Safari и в режиме инкогнито, элемент DIV даже не присутствует в DevTools, и поэтому мой текст просто входит в первый столбец сетки:
Как сайт отображается в Incognito и Safari < /p>


.hero {
max-width: 145rem;
margin: 0 auto;
padding: 0 3.2rem;
display: grid;
grid-template-columns: 1fr 1fr;
/* gap: 9.6rem; */
align-items: right;
justify-items: end;

}

.hero-description {
color: #fff;
font-size: 4.8rem;
font-weight: 700;
line-height: 1.6;
margin-bottom: 1.6rem;
text-shadow: -1px 1px 5px #333;

}

.hero-empty-box {
color: transparent;
}

.memes {
color: #fff;
font-size: 3.2rem;
font-weight: 500;
line-height: 1.6;
/* margin-bottom: 4.8rem; */
text-shadow: -1px 1px 5px #333;
}< /code>




Here is some filler text



Exploring and encouraging the thoughts behind music. Resources for musicians,
by musicians.

(And also bluegrass memes)


< /code>
< /div>
< /div>
< /p>
Я подумал, что проблема заключается в том, что элемент Div был пустым, поэтому я добавил абзац с текстом в Div, но это все еще не заставило элемент Div отображаться на странице или в Devtools. < /p>
Есть ли способ получить этот элемент div быть признанным браузерами? Или есть ли просто лучший способ выровнять мое текстовое поле? Адрес сайта www.michaelmarkguitar.com

Подробнее здесь: https://stackoverflow.com/questions/794 ... n-browsers