Hyperlink only partially clickable - html

Question

So I have just started to learn HTML/CSS and I am trying to create a website for a magazine I'm putting together. However, when I try adding two links to two different pieces of text, one is only partially clickable and the one below is not.
I am thinking it has something to do with my wrapper or the photos I have right beside the text because when I align them more right, they're now clickable. Seems to be like something is blocking part of the word (link) to be clicked on.
I have tried making a sidebar instead but I still get the same result. I tried moving my code around for different results, but still cannot figure it out.
#wrapper {
margin: 0 auto;
width: 1140px;
}
.slider {
max-width: 457px;
height: 451px;
margin: 0 auto;
position: relative;
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(TPWeb.jpg)no-repeat center;
background-size: cover;
animation: fade 80s infinite;
-webkit-animation: fade 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide2 {
background: url(DS.jpg)no-repeat center;
background-size: cover;
animation: fade2 80s infinite;
-webkit-animation: fade2 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide3 {
background: url(IT95Web.jpg)no-repeat center;
background-size: cover;
animation: fade3 80s infinite;
-webkit-animation: fade3 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
#font-face {
font-family:
}
#keyframes fade1 {
0% {
opacity: 1
}
33.333% {
opacity: 0
}
66.666% {
opacity: 0
}
100% {
opacity: 1
}
}
#keyframes fade2 {
0% {
opacity: 0
}
33.333% {
opacity: 1
}
66.666% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes fade3 {
0% {
opacity: 0
}
33.333% {
opacity: 0
}
66.666% {
opacity: 1
}
100% {
opacity: 0
}
}
}
.TPWeb {
margin-top: 80px;
margin-left: 50px;
}
.DFBase1 {
margin-top: 45px;
margin-left: 183px;
width: 448px;
height: 127px;
}
.ATA {
margin-right: 305px;
margin-top: -475px;
font-family:
}
.B {
margin-right: 370px;
font-family:
}
.about {
color: #000;
text-decoration: none;
}
.blog {
color: #000;
text-decoration: none;
}
<div id="wrapper">
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
<img src="DFBase1.png" alt="DFBase" class=DFBase1>
<div align="right" class=ATA>
<font size="5"><em><b>about the author</b></em></font>
</div>
<div align="right" class=B>
<font size="5"><em><b>blog</b></em></font>
</div>
</div>

Answer 1

.slider is overlapping the links since you're using a negative margin to move the links back up on the page.
A simple fix is to give the links a z-index by assigning position: relative
.ATA, .B {
position: relative;
}
#wrapper {
margin: 0 auto;
width: 1140px;
}
.slider {
max-width: 457px;
height: 451px;
margin: 0 auto;
position: relative;
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(TPWeb.jpg)no-repeat center;
background-size: cover;
animation: fade 80s infinite;
-webkit-animation: fade 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide2 {
background: url(DS.jpg)no-repeat center;
background-size: cover;
animation: fade2 80s infinite;
-webkit-animation: fade2 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
.slide3 {
background: url(IT95Web.jpg)no-repeat center;
background-size: cover;
animation: fade3 80s infinite;
-webkit-animation: fade3 20s infinite;
margin-top: 20px;
margin-left: -155px;
}
#font-face {
font-family:
}
#keyframes fade1 {
0% {
opacity: 1
}
33.333% {
opacity: 0
}
66.666% {
opacity: 0
}
100% {
opacity: 1
}
}
#keyframes fade2 {
0% {
opacity: 0
}
33.333% {
opacity: 1
}
66.666% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes fade3 {
0% {
opacity: 0
}
33.333% {
opacity: 0
}
66.666% {
opacity: 1
}
100% {
opacity: 0
}
}
}
.TPWeb {
margin-top: 80px;
margin-left: 50px;
}
.DFBase1 {
margin-top: 45px;
margin-left: 183px;
width: 448px;
height: 127px;
}
.ATA {
margin-right: 305px;
margin-top: -475px;
font-family:
}
.B {
margin-right: 370px;
font-family:
}
.about {
color: #000;
text-decoration: none;
}
.blog {
color: #000;
text-decoration: none;
}
<div id="wrapper">
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
<img src="DFBase1.png" alt="DFBase" class=DFBase1>
<div align="right" class=ATA>
<font size="5"><em><b>about the author</b></em></font>
</div>
<div align="right" class=B>
<font size="5"><em><b>blog</b></em></font>
</div>
</div>