I am creating a website in HTML and everything went well until something weird happened to my code. When I place 2 button side by side, a random horizontal line becomes visible. When I click on the button and hold it, the line becomes red. This has nothing to do with css, when I place the link to the css-file in comment, it still occurs.
When I look into the dev tools, there is an element called whitespace in it, but this is nowhere in my code.
When I search on the internet, the only thing that appears is how to add whitespace.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/main.css">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zoeken op bedrijf</title>
</head>
<body>
<header>
<nav>
<a href="/perSecotr.html">
<button type="button">Zoeken op sector</button>
</a>
<a href="#">
<button type="button">Zoeken op bedrijf</button>
</a>
</nav>
</header>
<div>
<h1>Welk bedrijf wilt u zoeken?</h1>
</div>
<div>
<form autocomplete="off">
<input type="text" placeholder="Naam van het bedrijf..." id="companyname" required />
<br>
<button type="button" id="submit"> Zoeken </button>
</form>
</div>
</body>
<script src="./js/index.js" type="text/javascript"></script>
</html>This happens because you are using a tag which in default has a text-decoration set to underline.
To fix this you need add a css rule
a {
text-decoration: none;
}