Stop Images colliding when resizing in bootstrap and HTML

Hey so i'm a student in High School

have an assessment coming up my computer studies class the assessment really is create a responsive informative website using HTML, BOOTSTRAP and CSS. Im saying this to warn people that I am shit at html and bootstrap so if there is organisation problems or just bad code thats because of my lack of knowledge

basically my problem is I have some images colliding when I resize.

most problems the my teacher said like put it in a div, resize image file not in html etc is not working

here is my html and css code which I need to fix

<!-- Nav -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#"><img src="ImagesFP/hollow.png" width="66" height="65.25" class="img-responsive"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown link
    </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
<!-- End of Nav -->

<!-- Image Slide -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" img src="ImagesFP/SL-1.jpg" width="960" height="720" class="img-responsive" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" img src="ImagesFP/SL-2.jpg" width="960" height="720" class="img-responsive" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" img src="ImagesFP/SL-3.jpg" width="960" height="720" class="img-responsive" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!-- Image Slide  -->

<!-- stuff -->

<div class="container text-center">
    <h2> How did I make this website </h2>
    <div class="row">
        <div class="col-sm-4">
            <div class="imgbox">
                <img src="ImagesFP/rsz_html.png" class="rounded float-left" alt="Responsive image" id="icon">
                <h4> HTML 5 </h4>
            </div>
        </div>

        <div class="col-sm-4">
            <img src="ImagesFP/rsz_bootstrap.png" class="rounded mx-auto d-block" alt="Responsive image" id="icon">
            <h4> Bootstrap 4 </h4>
        </div>

        <div class="col-sm-4">
            <img src="ImagesFP/rsz_css.png" class="rounded float-right" alt="Responsive image" id="icon">
            <h4> CSS 3 </h4>
        </div>
    </div>
</div>
<!-- stuff -->

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h4> Welcome To My Website </h4>
            <p> this is website designed for using bootstrap for example (image slides) and (nav bars) but by no means is this a "good" website... now here is a copy paste i got from wikipedia on what bootstrap is and other ramdom facts... Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation and other interface components... Life is a characteristic that distinguishes physical entities that have biological processes, such as signaling and self-sustaining processes, from those that do not, either because such functions have ceased, or because they never had such functions and are classified as inanimate.</p>
        </div>

        <div class="col-md-4">
            <img src="ImagesFP/man.png" width="430" height="335.5">
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h4> Welcome To My Website </h4>
            <p> Pepe the Frog is an Internet meme. A green anthropomorphic frog with a humanoid body, Pepe originated in a comic by Matt Furie called Boy's Club. It became an Internet meme when its popularity steadily grew across Myspace, Gaia Online and 4chan in 2008.</p>
        </div>

        <div class="col-md-4">
            <div class="jumbotron">
                <h4> why look at this website </h4>
                <ul>
                    <li> because you decided to look at </li>
                    <li>.</li>
                    <li> because i need to get practice and get excellence in all my com tests </li>
                    <li>.</li>
                    <li> if you really are confused as to how you got here you might want to call your GP </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <h4><a href="#hidden" data-toggle="collapse">Are you not board yet if not click me</a></h4>
        <div id="hidden" class=collapse>
            <h4> well if you are not now let me make you </h4>
            <p> Calculus, originally called infinitesimal calculus or "the calculus of infinitesimals", is the mathematical study of continuous change, in the same way that geometry is the study of shape and algebra is the study of generalizations of arithmetic operations. It has two major branches, differential calculus and integral calculus; the former concerns instantaneous rates of change, and the slopes of curves, while integral calculus concerns accumulation of quantities, and areas under or between curves. These two branches are related to each other by the fundamental theorem of calculus, and they make use of the fundamental notions of convergence of infinite sequences and infinite series to a well-defined limit.[1] Infinitesimal calculus was developed independently in the late 17th century by Isaac Newton and Gottfried Wilhelm Leibniz.[2][3] Today, calculus has widespread uses in science, engineering, and economics.[4]In mathematics education, calculus denotes courses of elementary mathematical analysis, which are mainly devoted to the study of functions and limits. The word calculus (plural calculi) is a Latin word, meaning originally "small pebble" (this meaning is kept in medicine). Because such pebbles were used for calculation, the meaning of the word has evolved and today usually means a method of computation. It is therefore used for naming specific methods of calculation and related theories, such as propositional calculus, Ricci calculus, calculus of variations, lambda calculus, and process calculus.</p>
        </div>
    </div>
</div>

<!-- FOOTER -->
<footer>
    <p> Last Updated: November 7, 2019 12:09 PM
        <! EndDate <br>
        2019 <a href=""></a>

    </p>
</footer>
<!-- FOOTER -->
</div>

CSS CODE:

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;
}

any body have any idea why