Having trouble with my columns in bootstrap

Hi everyone,

I’m working on my portfolio page and for the projects area I have three images next to each other (sm columns) and I’m not sure why the third image is stacked under the second one. I would like them to be even across the screen.

I feel like there’s probably a dumb little mistake somewhere. That’s usually what happens with me. :slight_smile: Thank you in advance.

While I look at your code try moving the <link> and <script> tags into the settings. It is assumed that the HTML editor is already working within <body> tag.

Edit:

Also move the <meta> tags into the settings.

Alright, they should all moved into settings now.

In the second image:

<div class="col-sm-4">
  <p>Shooting Star</p>
  <a href="https://www.khanacademy.org/computer-programming/spin-off-of-project-shooting-star/5500046668529664">
    <img class="img-responsive" style="width:100%" src="https://www.w3schools.com/bootstrap/birds2.jpg" alt="Image">
    <div class="col-sm-4"> <!-- LOOK HERE! -->
  </a>
</div>

There’s a stray opening <div> tag there.

I think you’re also missing class="img-responsive" in the third image

Also don’t use <center>; it’s deprecated. Center content using CSS instead.

Wow, I didn’t even see that extra div I made. That fixed it! Thanks!