My website project has a navigation bar at the top of the page. I made it on the index/home page and then copied and pasted it onto the other three pages so that there would be no differences. It looks the same on all of the pages, except for one page, where it has less margin/padding. I'll insert the pictures, but I've been told that the difference isn't clear unless you see it in real life on my screen. Correct margin/padding, incorrect margin/padding.
.navigation {
list-style-type: none;
margin: 5px;
padding: 1px;
text-align: center;
background-color:#bee7b8;
overflow: hidden;
}
.navigation img {
width: 250px;
float: left;
}
.navigation a {
display: block;
width: 10px;
color: #0c7c59;
font-family: Nunito;
font-size: 28px;
text-decoration: none;
padding-left: 100px;
}
.navigation li {
float: left;
padding-top: 32.5px;
width: 295px;
}
.navigation a:link {
color: #0c7c59;
}
.navigation a:visited {
color: #28c191;
}
.navigation a:hover {
color: #799b74;
}
.navigation a:active {
color: #4c2e05;
} <header>
<ul class="navigation">
<img class="navigation" src="https://i.imgur.com/x4oWsIA.png">
<li><a href="index.html">HOMEPAGE</a></li>
<li><a href="products.html">PRODUCTS</a></li>
<li><a href="regpay.html">REGISTER</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</header>I'm wondering if it's like this because I've tried using an image slideshow from W3 schools (shown in this question of mine), but removing that has not helped.
EDIT: I found out that linking to the w3 stylesheet is what causes it! IDK how to fix this though...