Почему мое видео вылезает за пределы доступного, появляется скролл и не работает текст?

Question

[issaRUX]

Я знаю, что есть похожий вопрос, но я уже все перепробовала. Подскажите, пожалуйста)
Html:

<section>
        <video autoplay muted loop id="myVideo">
        <source src="video/video.mp4" type="video/mp4">
        </video>
        <div class="text">
            <h1>TEXT</h1>
        </div>
    </section>

css

.section {
    width: 100%;
    height: 100vh;
    background: #ff6803;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#myVideo {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.text {
    color: #ffffff; 
    z-index: 10;
    position: relative;
    font-size: 48px;
}

я хочу, чтобы этот непонятный скролл исчез, а текст стал поверх. Не понимаю почему к нему не применяются стили. Если ошибка в путях, то вот так расположены файлы:

C:\Users\alena\OneDrive\Рабочий стол\z\портфолио\video

Comments

[Ankhena]

Почему мое видео вылезает за пределы доступного

А где сказано, какого размера оно должно быть?

Для наложения блоков используйте гриды, абсолюты тут лишние.
Чтобы понять почему текст сейчас не поверх, загуглите "контекст наложения".

[Danny Arty]

1. Во-первых, у вас стили указаны для элемента с классом .section, а у вас секция без класса, т.е. если стили для нее, то должно быть просто section {...тут стили...}
2. Зачем вообще использовать абсолютное позиционирование?

Answer 1

[Levott]

Почему вы обращаетесь к секции как к классу?
Удалите точку вначале, либо дайте секции класс
У вас текст в диве, если я не ошибаюсь надо писать
.text h1{
Стили
}

Comments

[Levott]

В целом, текст должен и так работать, скорее всего вся ошибка в секции