Почему не работает display: inline-block?

Спасибо большое!

Как сделать так, чтобы все объекты, которые есть в моем div не выходили за его пределы?

Максим Ленский, понял, спасибо!

Как сделать так, чтобы все объекты, которые есть в моем div не выходили за его пределы?

Картинка просто стала своего стандартного размера

Как сделать так, чтобы все объекты, которые есть в моем div не выходили за его пределы?

Можно поподробней, пожалуйста

Как сделать так, чтобы все объекты, которые есть в моем div не выходили за его пределы?

Сергей Герасимов,

Прописал то, что вы сказали, но картинка теперь выше моего div. Она как раз над ней
Я пробовал вместо "bottom" писать 'top' (не знаю, зачем, просто экпериментировал) и в этом случае картинка вообще была в самом низу сайта.
Я новичок, поэтому еще плохо разбираюсь в верстке, за что извиняюсь:)

вот мой CSS код

.heroes {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/hero-back-1.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
    position: relative;
}

.hero-name {
    font-size: 300%;
}

.hero-name-2{
    font-size: 200%;
}
.gerald {
    display: block;
    width: 40%;
    bottom: 100%;
    position: absolute;
    
}

Margin-top работает некоректно (HTML/CSS), в чем ошибка?

Разобрался, спасибо большое!

HTML/CSS. Как убрать расстояние между объектами полностью?

Спасибо!!!