Остановить столкновение изображений при изменении размеров в bootstrap и HTML

Question

Эй, я учусь в старшей школе.

У меня есть оценка, которая подходит к моему уроку компьютерных исследований. Оценка действительно заключается в создании адаптивного информативного веб-сайта с использованием HTML, BOOTSTRAP и CSS. Я говорю это, чтобы предупредить людей, что я дерьмо на html и bootstrap, поэтому, если есть организационные проблемы или просто плохой код, из-за моего недостатка знаний

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

большинство проблем, которые сказал мой учитель, как положить его в div, изменить размер файла изображения не в html et c не работает

вот мой html и css код, который мне нужно исправить

CSS КОД

    body{
        background-image: url("https://lh3.googleusercontent.com/proxy/bH-E_bOZVvg8Tet9wNoSisRFjNCivlR-7GAY2Q6AWF4q4KU46sIgxUUGHjmb58JLVum7jviuNn40NJdWZkPVtBZOJMDrc2ORZP7mvj5f04k");

    }

    footer {
        padding: 10px 0;
        clear: both;
        text-align: center;
    }
    footer a {
        color: #00bcff:

    }

    ul {
        text-align: center;
        list-style-position: inside;
    }

    .container{
        margin: 4% auto:
        max-width: 200px;
    }

    ul
    {
    list-style-type: none;
    }

    .imgbox{
           max-width: 150px;
        display: inline-block;
        vertical-align: top;
        padding:0 10px;
    }

кто-нибудь знает, почему

Answer 1

Ширина вашего изображения на данный момент зафиксирована как 960

Попробуйте добавить ниже css:

.carousel-item img {
  max-width: 100%;
}

Бонус: используйте тег picture для ответа дизайн: https://www.w3schools.com/tags/tag_picture.asp