Just starting out with website development on Wordpress and tinkering with my home page to improve its appearance. Encountered an issue while attempting to enclose my div within an a tag to make the entire box clickable as a link.
The code for in-page editing looks like this:
<a href="random_link1">
<div>
<img src="random_image1"/><br>
random text 1
</div>
</a>
<a href="random_link2">
<div>
<img src="random_image2"/><br>
random text 2
</div>
</a>
Multiple divs in a row are supposed to be side by side (using CSS display: inline-block)
However, on the live site, these divs end up stacking vertically. Upon inspection using developer tools (Chrome), I noticed that the code includes an extra p element with the same a tag in the middle of the divs:
<a href="random_link1">
<div>
<img src="random_image1"/><br>
random text 1
</div>
</a>
<p>
<a href="random_link1"></a>
<a href="random_link2"></a>
</p>
<a href="random_link2">
<div>
<img src="random_image2"/><br>
random text 2
</div>
</a>
Does anyone know how to resolve this issue?