problem with blog entry images

hey guys, i wanted to upload a blog entry showcasing my collection, but came to a certain problem - i want all the images to sit right next to each other in the same row in every row, but the images just keep piling up right under one another. 

i am not adding any paragraphs (this being no

nor
) and i def do not use enter to put it to next row. i use the "view html" in the content editing section. any advice on how to fix this and if its even fixable?

.image-grid { 
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px; } 

.image-grid img { 
width: 100%; 
height: 250px;
object-fit: cover; }
<br>

first add that grid css to your blog layout

<div class="image-grid">
  <img src="IMAGE_GOES_HERE">
  <img src="IMAGE_GOES_HERE">
  <img src="IMAGE_GOES_HERE">
  <img src="IMAGE_GOES_HERE">
</div>

then this chunk of html outside of your stylesheet, replacing the IMAGE_GOES_HERE with the actual url for your images

gl!