В div я поместил текст из одного слова. Он таинственным образом получает ненужное пространство, и я не могу понять, почему оно появляется

Я пытаюсь создать сайт портфолио, используя Django. Я создал шаблон со следующим HTML-кодом:

<div class="bg-black fnt-white experience-div block brdr">
        
        <h1 class="brdr block div-title roboto fnt-orange roboto">
            Education
        </h2>

        <div class="experience-container inline-block bg-gray">
            <h2 class="text-center fnt-black head-portfolio">
                Lorem, ipsum.
            </h2>
            <br>
            <br>
            <p class="margin-auto txt-portfolio roboto  fnt-black">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero nemo dolore sit perferendis qui ad hic, expedita, magnam ipsam est eligendi nulla, ipsum quasi fuga?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi corrupti asperiores voluptatem sit fugiat saepe doloribus suscipit rerum eum. Nulla molestiae quasi sint libero voluptate qui repellat quis eos ratione itaque! Aut deserunt labore excepturi corporis hic nostrum voluptates vero beatae facilis non amet quaerat aliquam iste eveniet natus, voluptatem aperiam veritatis, expedita incidunt quis sunt eaque saepe est totam.
            </p>
            <br>
            <a href="#" class="buttons read-more fnt-white">Read More</a>
            
        </div>
    </div> 

Однако при <h1> образовании текст получает неожиданно большой отступ. С помощью элемента google's inspect он показывает отсутствие отступов и т.д.

Однако, сворачивая браузер, я замечаю, что он прекрасно выравнивается влево.

Мой код CSS:

.div-title{
    font-size: 40px;
}

.experience-container{
    min-height: 100px;
    height: fit-content;
    width: 300px;
    margin-left: 50px;
    padding: 10px;
    
    transition: all 0.5s;
    border-radius: 10px;

    margin-bottom: 10px;
    margin-top: 10px; 
    
    box-shadow: 0px 5px rgb(162, 162, 163);

}

.experience-container:hover{
    box-shadow: 0px 5px 30px rgb(255, 0, 0);  
    
}

.experience-div{
   margin: auto;

    
}

Я полагаю, что это соответствующие CSS, которые могут иметь значение, но если требуется что-то еще, пожалуйста, дайте мне знать. Спасибо!

Дополнительно, пожалуйста, объясните, почему ваше решение необходимо и что я сделал неправильно, если можете :)

Для справки я прикрепил изображение:

Вернуться на верх