Trying to place images side by side in tribute project

Hi! So I’m working on the tribute project and I’m not really sure where my code is going wrong. I’m trying to place three images side by side and I’ve used ‘col-md-4’, but the space between the images are fixed.

Here’s a preview:

My HTML:

<div class="container-fluid">
  <div class="row" id="pictures">
    <div class="col-md-4">
      <h1>ROBERT</h1>
      <h2>DOWNEY JR.</h2> 
      <p class="quote">“Mediocrity is my biggest fear. I’m not afraid of total failure because I don’t think that will happen. I’m not afraid of success because that beats the hell out of failure. It’s being in the middle that scares me.” - Robert Downey Jr.</p>
    </div>
    <div class="col-md-4"> <img id="image1" src="https://i.imgur.com/lEFLOF7.jpg"> </div>
    <div class="col-md-4"> <img id="image2" src="https://i.imgur.com/G0PA2Mf.jpg"> </div>
    <div class="col-md-4"> <img id="image3" src="https://i.imgur.com/SxJNo0I.jpg"> </div>
    
  </div>
</div>

And my CSS (same for the three images):

`#image1 {
  padding: 5px;
  width: 280px;
  height: auto;
  margin-top: 40px;
}`

As you can see I’m trying to put the header and three images side by side, any help how to fix this?

A row can only have div cols which sum to 12. You have a row summing to 16, so the 3rd image drops down to the next line. If you want all of that content on the same row, try using col-md-3 for all 4 of the divs.

FYI - imgur.com does not allow hotlinking from a website, so even though it may work on your local computer, when you go to upload your project to an actual website, those images will not show.

Not sure if you are using Bootstrap 3 or 4 for your project. If version 3, I recommend using the “img-responsive” class or “img-fluid” class for version 4, to make the images more responsive.

Based on the size of the images, I recommend using col-sm-3 instead of col-md-3. Also, try using the following to make the images all the same height.

img {
  padding: 5px;
  height: auto;
  margin-top: 40px;
}

Playing around with your project, I came up with the following to see if you like the way this lays out on different width screens.
HTML (using Bootstrap 3)

<div class="container-fluid">
    <div class="col-md-3 summary text-center">
      <h1>ROBERT</h1>
      <h2>DOWNEY JR.</h2>
      <p class="quote">“Mediocrity is my biggest fear. I’m not afraid of total failure because I don’t think that will happen. I’m not afraid of success because that beats the hell out of failure. It’s being in the middle that scares me.” - Robert Downey Jr.</p>
    </div>
  <div class="col-md-9">
    <div class="row" id="pictures">
      <div class="col-xs-4"><img class="img-responsive" id="image1" src="https://i.imgur.com/lEFLOF7.jpg"></div>
      <div class="col-xs-4"><img class="img-responsive" id="image2" src="https://i.imgur.com/G0PA2Mf.jpg"></div>
      <div class="col-xs-4"><img class="img-responsive" id="image3" src="https://i.imgur.com/SxJNo0I.jpg"></div>
    </div>
  </div>
</div>

CSS

.summary, img {
  padding: 5px;
  height: auto;
  margin-top: 40px;
}

.summary h1 {
  margin-top: 0;
}