Things aren't working as expected

[Eevee164]

I haven't worked with HTML since uni, and I always had someone to look over my shoulder. I'm trying to create an online portfolio and seem to be having some trouble can anyone help me please. (Most of them seem to be visual glitches I can't work out).

The biggest one at the moment is my gallery flowing down instaed of across. I have a bunch of photos in a linked gallery I want to go horizontally across the screen but they go vertically. (I also want there to be a bit of space between them, since at the moment they seem to be stuck together, but that is a different problem.)

<div class="gallery">
<a target="_blank" href="/*insert link*/">
<img src="image.png" width="600" height="400">
</a>
<div class="desc">Writing about the page it links to</div>
</div>

Each gallry image is in a div like this and the CSS looks like this:

div.gallery {
border: 1px solid #8BCEE9;
}

div.gallery:hover {
border: 4px solid #8BCEE9;
}

div.gallery img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
font-family: 'Lato', regular;
color: #3D3A3A;
}

I'm mostly using the W3Schools website to answer most of my questions but it seems I've hit a dead end. Thanks in advance!