How to make images go horizontal rather than vertical!

[Serlei]

Can't seem to find a way to keep all my images horizontal!!

They all seem to turn out like this: 


When I would like them like this:

It might be because they all link to something as well! 

If anyone can help, thank you!! 

Here's where it is as well if you need to see it :3

[BlackMageGaming]

There are a lot of ways that you can do this, but with how you're handling the picture + text, I would use a div with the grid display.

The way I typically do this is by creating a div that displays everything in a grid. If yours would be in a 4 column format, it would need to have the style "display:grid; grid-template-columns: auto auto auto auto;" (The four autos are the amount of columns you would like to display, you can remove them or add more. Auto means that they resize themselves automatically.)

Then, for each picture with text under it, it would need to be inside another div. Nothing special needs to be done, just make sure that they are together.
Final code looks like this:

Code

<div style="display:grid; grid-template-columns: auto auto auto auto;">
  <div><a href="https://www.youtube.com/playlist?list=PLvFk3QopsJRB2Ijstwj8vN_VC7SjR6-JX" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204555.png" alt="makoto" style="width:200px"></a>
  <h style="font-size:12px;"><center>Danganronpa: Trigger Happy Havoc</center></h>
    </div>
    <div><a href="https://www.youtube.com/playlist?list=PLvFk3QopsJRD3n-GcYC40yp7EFA6tPotk" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204609.png" alt="hajime" style="width:200px"></a>
      <h style="font-size:12px;"><center>Danganronpa 2: Goodbye Despair</center></h>
</div>
    <div><a href="https://www.youtube.com/playlist?list=PLiCwdvC57cBrQoTeSMJLqcMSZz8RyOxr6" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204622.png" alt="komaru" style="width:200px"> </a>
      <h style="font-size:12px;"><center>Ultra Despair Girls</center></h></div>
    <div>
      <a href="https://www.youtube.com/playlist?list=PLGmWubZ1wU17FvYITGANem4BsSenQbG1y" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204631.png" alt="kaede" style="width:200px"> </a>
      <h style="font-size:12px;"><center>Danganronpa V3: Killing Harmony</center></h>
      </div>
    </div>

And it should look like this:



Again, this is by no means the most efficient way to do this. Just one of several ways to do it.

[Serlei]

There are a lot of ways that you can do this, but with how you're handling the picture + text, I would use a div with the grid display.

The way I typically do this is by creating a div that displays everything in a grid. If yours would be in a 4 column format, it would need to have the style "display:grid; grid-template-columns: auto auto auto auto;" (The four autos are the amount of columns you would like to display, you can remove them or add more. Auto means that they resize themselves automatically.)

Then, for each picture with text under it, it would need to be inside another div. Nothing special needs to be done, just make sure that they are together.
Final code looks like this:

Code

<div style="display:grid; grid-template-columns: auto auto auto auto;">
  <div><a href="https://www.youtube.com/playlist?list=PLvFk3QopsJRB2Ijstwj8vN_VC7SjR6-JX" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204555.png" alt="makoto" style="width:200px"></a>
  <h style="font-size:12px;"><center>Danganronpa: Trigger Happy Havoc</center></h>
    </div>
    <div><a href="https://www.youtube.com/playlist?list=PLvFk3QopsJRD3n-GcYC40yp7EFA6tPotk" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204609.png" alt="hajime" style="width:200px"></a>
      <h style="font-size:12px;"><center>Danganronpa 2: Goodbye Despair</center></h>
</div>
    <div><a href="https://www.youtube.com/playlist?list=PLiCwdvC57cBrQoTeSMJLqcMSZz8RyOxr6" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204622.png" alt="komaru" style="width:200px"> </a>
      <h style="font-size:12px;"><center>Ultra Despair Girls</center></h></div>
    <div>
      <a href="https://www.youtube.com/playlist?list=PLGmWubZ1wU17FvYITGANem4BsSenQbG1y" target="_blank"><img src="https://serlei.neocities.org/Danganronpa-Media/Pics/Untitled426_20260908204631.png" alt="kaede" style="width:200px"> </a>
      <h style="font-size:12px;"><center>Danganronpa V3: Killing Harmony</center></h>
      </div>
    </div>

And it should look like this:



Again, this is by no means the most efficient way to do this. Just one of several ways to do it.

THANK YOU SO MUCH!!!! 

 
I'll definitely be adding more images so that would be nice to keep in mind, thank you again!!