I recently designed a basic website and everything was running smoothly until I decided to insert a new ul division in the HTML page as a spacer between two elements:
<div>
<ul>
<li><a></a></li>
</ul>
</div>
After adding this, a mysterious dot started appearing on my website (as shown in this image).
So, my question is how can I remove this dot?
(I want it to look like this: image)
Here is the code that includes the CSS and HTML:
header {
width:100%;
height:350px;
position:relative;
overflow:hidden;
z-index:-1;
border:3px solid grey;
background-position: center center;
display: flex;
background-image:url("../images/index/header/header.jpg");
background-size: cover;
}
.main-wrapper {
position: relative;
}
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
right: 0;
bottom: 0;
}
#navul01 li {
float: left;
}
/* The rest of the CSS code goes here */
<!DOCTYPE html>
<html>
<head>
<title>home</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main-wrapper">
<header> </header>
<div><nav>
<ul id="navul01">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">blog</a></li>
<li><a href="#contact">subjects</a></li>
<li><a href="#about">contacts</a></li>
</ul>
</nav></div>
</div>
<div>
/* New ul division */
<ul>
<li><a></a></li>
</ul>
</div>
<div>
/* Another unordered list */
<ul id="subjects_nav">
<li><a id="physics_image" href="#home">PHYSICS</a></li>
<li><a id="chemistry_image" href="#news">CHEMISTRY</a></li>
<li><a id="maths_image" href="#contact">MATHS</a></li>
</ul>
</div>
</body>
</html>