Anchor Element Creating New Column In Grid

Hello. I’m completing the portfolio creation responsive web design project, and possess a grid with three columns that displays three separate images without issue. However, when I link the first image to a URL using an anchor, the last of the images is bumped down to a second line, with a new, blank column being created before the first two images. It’s as if I have an invisible forth column.

That said, the inserted anchor does link to the first viewable image as intended (which is now in the second column after the first invisible column), so I’ve no idea why a new column is being created upon the URL’s insertion. I changed the anchor’s placement to come after the image, which caused my invisible column to appear as my second column, rather than my first. If I remove the a href link, the additional column goes away, so it’s definitely the cause of the issue. I attempted to surround it and the image with a div tag, but that didn’t correct it. I then placed the anchor inside a div tag, but while that corrected the alignment, it killed the anchor and the link no longer works.

I’ve attached screenshots of what my page looks like, as well as my HTML code (I removed the div tag that was surrounding the anchor and image, as it affected nothing).

Here’s a link to the project itself
. https://codepen.io/cbyess/pen/VwmKppg

Any assistance on how to attach an anchor to an image in a grid without a new grid column being created would be appreciated.

You never closed the first div element before the first a tag

Are you referring to the div class=“projects-grid” element? This div creates my grid and contains the images in question, and closes after the third image. If I close it before, the images aren’t contained in the grid.

If I leave the div there, but take the anchor tag out, the images appear as desired in the grid. I’ll attach a screenshot of what it looks like with just the anchor tag removed.

I copied the Codepen example of how it had a div surrounding its anchor tag and image, and it displays correctly, so I’m unsure what is causing the discrepancy. Codepen uses the below, and it works.

Here’s a link to Codepen’s version of the project.

https://codepen.io/freeCodeCamp/pen/zNBOYG

Ahh, I was missing anchor tags in my nav menu, and it had a domino affect. This is now resolved.