I am struggling with adjusting the position of a link so that it doesn't overlap with the paragraph. I've tried using top and margin-top properties, but the link just won't budge. Additionally, I have a horizontal line (hr) below the link that I also want to move lower, but it remains static. I'm unsure how to resolve these issues. Please review the code snippet below:
HTML:
<p class="teaser">There is ongoing discussion about the future of EU citizens in the UK, whether they will be allowed to remain on the island. This raises questions about British citizens living in the EU, as well as what will happen to British citizens traveling to Europe. Will UK citizens need visas to visit Spain or other destinations in Europe? There is much speculation surrounding the future of EU citizens li</p>
<figure>
<a class="back" href="articles.html">Back to articles</a>
</figure>
<hr class="bottom-line">
CSS (desktop):
.teaser {
text-align: justify;
margin: auto;
width: 50%;
line-height: 1.5;
position: relative;
top: 20px;
text-align: justify;
text-indent: 2%;
line-height: 2;
font-family: "Times New Roman", Times, Serif;
font-size: 20px;
}
.back {
text-align: center;
top: 5px;
text-decoration: none;
font-family: "Times New Roman", Times, Serif;
font-size: 25px;
color: black;
}
.back:hover {
color: #2347b2;
}
.bottom-line {
text-align: center;
width: 50%
}
CSS (responsive):
.teaser {
width: 100%;
margin: auto;
top: 45px;
}
.figure back {
margin: auto;
}
.bottom-line {
width: 100%;
margin: auto;
}