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.
