Strange empty hyperlink. How do I get rid of it? - html

Question

I tried to make a list of hyperlinks for the "Follow" section of a footer I'm trying to create right at the end of my code, which should act as a button and I managed to do that. However, for some reason, there is some "extra-button" next to the last two hyperlinks and I can't seem to figure out why. I've already searched for a solution on the internet, but I couldn't find anything related to my problem. I would be really grateful if someone could take a look at my code real quick and tell me if they can figure out what's wrong.
(I apologize that the majority of the website is in German, but I tried my best to make most of it in English.)
body {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
font-style: italic;
}
.picture {
position: absolute;
left: 1150px;
top: 200px;
}
h2 {
text-decoration: underline;
}
.maintext {
margin-left: 100px;
}
h3 {
font-style: italic;
}
.nav {
background-color: red;
color: white;
padding: 14px 16px;
margin-right: 10px;
}
.nav_ul {
color: white;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li {
float: left;
}
.navlist a {
display: block;
color: grey;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navlist a:hover {
background-color: #434343;
color: white;
}
.footer {
color: grey;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
padding-left: 300px;
}
.ftheads {
color: white;
font-weight: bold;
}
.ftcontent {
float: left;
display: block;
color: grey;
text-align: center;
padding: 40px 50px;
text-decoration: none;
}
.ftlist {
float: none;
padding: 5px;
text-align: left;
}
.ftlisthead {
color: white;
list-style-type: none;
font-style: italic;
float: none;
padding: 15px;
text-align: left;
margin-left: -25px;
margin-top: 5px;
}
.ftobject {
margin-top: 70px;
}
.ftobject a {
color: grey;
text-decoration: none;
background-color: black;
padding: 10px;
}
.ftobject a:hover {
background-color: #434343;
color: white;
}
.ftlist_follow {
float: none;
padding: 20px;
text-align: left;
}
.ftlist_follow a {
color: grey;
text-decoration: none;
background-color: black;
padding: 14px 16px;
}
.ftlist_follow a:hover {
background-color: #434343;
color: white;
}
<header>
<h1>Mein Sommer 2018</h1>
</header>
<div class="picture">
<img src="Wallpaper_komprimiert.jpg" alt="Landschaft" width=200px height=112px>
</div>
<hr>
<nav>
<div>
<ul class="nav_ul" id="navigationbar">
<li class="nav">Navigation</li>
<li class="navlist"> 1. Juli </li>
<li class="navlist"> 1. Woche </li>
<li class="navlist"> 2. Woche </li>
<li class="navlist"> 3. Woche </li>
<li class="navlist"> 4. Woche </li>
<li class="navlist"> 1. August </li>
<li class="navlist"> 5. Woche </li>
<li class="navlist"> 6. Woche </li>
<li class="navlist"> 7. Woche </li>
<li class="navlist"> 8. Woche </li>
</ul>
</div>
</nav>
<hr>
<div class="maintext">
<header>
<h2 id="Ziel1">1. Juli</h2>
</header>
<br>
<section>
<h3 id="Ziel2"> 1. Woche </h3>
</section>
<article>
<h4>In der ersten Ferienwoche habe ich eine Zeichnung fertiggestellt, an der ich schon eine Weile gearbeitet habe. <br> Die meiste Zeit habe ich aber mit meiner Schwester und unseren Freunden verbracht.
</h4>
</article>
<section>
<h3 id="Ziel3">2. Woche</h3>
</section>
<article>
<h4>In der zweiten Ferienwoche begann es allmählich heißer zu werden. Deshalb blieben meine Schwester und ich die meiste Zeit Zuhause. Wenn Freunde kamen, spielten wir normalerweise Videospiele.
</h4>
</article>
<section>
<h3 id="Ziel4">3. Woche</h3>
</section>
<article>
<h4>Die dritte Woche war aufgrund der Hitze relativ wenig los. Fast jeden Tag verbrachten meine Schwester, ihr Freund und ich stundenlang bei einem Freund. Glücklicherweise hatte dieser eine Klimaanlage, was vorteilhaft war.
</h4>
</article>
<section>
<h3 id="Ziel5">4. Woche</h3>
</section>
<article>
<h4>In der vierten Woche übernachteten wir zwei mal bei unserem Freund. In der ersten Nacht schauten wir während des Verlaufes der Nacht drei Filme und blieben deshalb selbstverständlich die ganze Nacht wach. In der zweiten Nacht haben wir uns wieder
zwei Filme angesehen, gingen aber diesmal um etwa 4:00 schlafen.
</h4>
</article>
<br>
<header>
<h2 id="Ziel6">1. August</h2>
</header>
<br>
<section>
<h3 id="Ziel7">5. Woche</h3>
</section>
<article>
<h4>In der fünften Woche ging einer unserer Freunde für den Rest der Ferien arebiten um ein Praktikum am Flughafen Wien zu machen. Folglich war auch noch weniger los als sonst. Der Freund meiner Schwester kam zwar noch immer fast jeden Tag, jedoch relativ
spät.
</h4>
</article>
<section>
<h3 id="Ziel8">6. Woche</h3>
</section>
<article>
<h4>Nun wurde es glücklicherweise kühler und ich schaffte es mich wieder besser zu beschäftigen als mit dem Handy oder Videospielen. Ich traf mich seit längerer Zeit wieder mit einem Freund im Parkbad.
</h4>
</article>
<section>
<h3 id="Ziel9">7. Woche</h3>
</section>
<article>
<h4>In der siebten Ferienwoche unternahmen meine Familie und ich einen Ausflug zu meiner Tante und ihrem Lebensgefährten, die wir seit mehreren Jahren nicht gesehen haben. Wir hatten gehofft, dass wir meine Cousine auch sehen würden, aber diese war leider
arbeiten.
</h4>
</article>
<section>
<h3 id="Ziel10">8. Woche</h3>
</section>
<article>
<h4>In der letzen Woche versuchten meine Schwester und ich unser bestes um die letzten paar Ferientage noch so gut wie möglich auszunutzen. Wir verbrachten abermals einen Tag bei meiner Tante und haben diesmal auch unsere Cousine wiedergesehen. Unser
Freund hat sich für die letzten zwei Tage seines Praktikums Urlaub genommen und konnte folglich die restlichen Tage mit uns Zeit verbringen.
</h4>
</article>
</div>
<footer class="footer">
<div class="ftcontent">
<header class="ftheads"> Navigate </header>
<section class="ftobject">
- Navigation-Bar
</section>
</div>
<div class="ftcontent">
<header class="ftheads"> Contact </header>
<section>
<ul>
<header class="ftlisthead">E-mail:</header>
<li class="ftlist"> nayonyx#gmail.com </li>
<li class="ftlist"> 8085#htl.rennweg.at </li>
<header class="ftlisthead"> Telephone: </header>
<li class="ftlist"> [phone] </li>
</ul>
</section>
</div>
<div class="ftcontent">
<header class="ftheads"> Follow </header>
<section>
<ul>
<li class="ftlist_follow"> <a href="#Facebook"> Facebook </li>
<li class="ftlist_follow"> <a href="#Instagram"> Instagram </li>
<li class="ftlist_follow"> <a href="#Twitter"> Twitter </li>
</ul>
</section>
</div>
</footer>

Answer 1

You forgot to close your HTML <a> tag using </a>, like this:
<ul>
<li class="ftlist_follow"> Facebook </li>
<li class="ftlist_follow"> Instagram </li>
<li class="ftlist_follow"> Twitter </li>
</ul>
That should fix your issue.

Answer 2

Just remove the padding here and buttons will disappear.
.ftlist_follow a {
color: grey;
text-decoration: none;
background-color: black;
padding: 14px 16px;
}