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

[Anonymous]

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




Here is some filler text




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

(And also bluegrass memes)

< /code>
css ниже: < /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;
}

< /code>
Я подумал, что проблема заключается в том, что элемент Div был пуст, поэтому я даже добавил абзац с текстом в Div, но это все еще не заставило элемент Div отображаться на Страница или в Devtools. < /p>
Есть ли способ получить этот элемент Div для распознавания браузерами? Или есть ли просто лучший способ выровнять мое текстовое поле? /p>
Любая помощь очень ценится! Я все еще очень новичок. Дайте мне знать, если мне нужно предоставить дополнительную информацию или код. Большое спасибо.

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