An ‘a’ element has initial styling that you need to override.
Also, you need to fix your HTML. There’s an errant ‘1’ after id=”home” and you need to add ‘>’ to close your opening div elements.
Try this:
<head>
<title>The Accounting Centre</title>
<link rel="icon" type="image/png" href="TAC.png" sizes="16x16">
<style>
body{
padding: 0;
margin: 0;
}
.navbar{
position: fixed;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
background-color:#d4d7de;
width: 100%;
height:70px;
z-index: 1;
}
.nav {
display: flex;
justify-content: right;
list-style: none;
margin:15px;
}
.nav a {
color:#000;
text-decoration: none;
text-transform: uppercase;
padding: 0 1rem;
}
.logo {
flex: 1 1 auto;
margin-left: 10%;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
font-size:35px;
margin:15px;
color:#000;
text-decoration: none;
text-transform: uppercase;
}
</style>
</head> <!DOCTYPE html>
<html>
<body>
<div class="navbar">
<a href="#" class="logo">TAC</a>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Our Services</a></li>
<li><a href="#info">Who We Are</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
</div>
<div class="banner-area" id="home"></div>
<div class="about-area" id="about"></div>
<div class="services-area" id="services"></div>
<div class="info-area" id="info"></div>
<div class="testimonials-area" id="testimonials"></div>
<div class="contact-area" id="contact"></div>
</body>
</html>