Why is the img-fluid class in Bootstrap 4 not resizing my images in their divs?

Issue

I have a Bootply playground example here: https://www.bootply.com/eXlkXkUvDJ

I'm trying to align the bottom three images so that the far left and far right images are flush with the main image and titles. I also want the images to fill the divs completely -- I highlighted the first image div in black so you can see that the image is not completely filling it.

I checked the Bootstrap 4 documentation and it looks like the 'img-fluid' class should make the images fill each div, but that's not happening.

Here's my HTML code:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aisha Wells Portfolio</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class="container" alt="this is the main container">
    <div class="row">
        <div class="col-md-6" alt="udacity logo">
            <img src="http://cdn.onlinewebfonts.com/svg/img_369247.png" alt="fake logo" width="50" height="50" class="img-responsive">
        </div>
        <div class="col-md-6 text-right text-uppercase" alt="my name">
                <h1> Shere Wells </h1>

                <h3> Writer and Filmmaker </h3>

        </div>
    </div>
</div>
<div class="container" alt="this is the main container">
    <div class="row">
        <div class="col-md-12 rule">
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 main-img" alt="this is the main image">
            <img class="img-fluid" src="http://www.placepuppy.net/400/250" width="100%">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
                <h4>Featured Work</h4>

        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-4 first" alt="First project image">
                <img class="img-fluid" src="https://placekitten.com/250/250" alt="kitteh">
                    <h5>First Name</h5>

            </div>
            <div class="col-md-4 second" alt="Second project image">
                <img class="img-fluid" src="https://placekitten.com/250/250" alt="kitteh">
                    <h5>Second Name</h5>

            </div>
            <div class="col-md-4 third" alt="Third project image">
                <img class="img-fluid" src="https://placekitten.com/250/250" alt="kitteh">
                    <h5>Third Name</h5>

            </div>
        </div>
    </div>
</div>
<div id="push"></div>

And here's my CSS code:

/* CSS used here will be applied after bootstrap.css */

@charset "UTF-8"; 
/*CSS Document for My Portfolio Page*/

h1 { 
    color: #2d3c49; 
    float: right; 
    font-family: 'Montserrat', sans-serif;
}

h3 {
    color:#7d97ad;
    float: right;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;

}

h4 {
    color:#7d97ad;
    font-family: 'Montserrat', sans-serif;

}

h5 {
    color:#7d97ad; 
    font-family: 'Montserrat', sans-serif;
}

hr {
    border-top-style: solid;
    border-top-width: thick;
    border-top-color:#7d97ad; 
    padding-top:20px;

  }

.first {
    background-color:black; 

}

.col-md-6 {
    background-color:black; 

}

Solution

Add w-100 class on the img tag

<img class="w-100 img-fluid" src="https://placekitten.com/250/250" alt="kitteh">

Also remove the second "container" div just before the start of kitten's row.

No need of another container inside a container.

Bootply link

Answered By - Nandita Sharma