Why does my navigation bar header look different on only one page?

Asked 2 days ago
Viewed 13 times

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;
    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;
            <ul class="navigation">
                <img class="navigation" src="">
                <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>

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.

asked 2 days ago

Correct Answer

have you reset your CSS code? If you haven't then try this on top of your CSS code:

* {
  margin: none;
  padding: none;

also, make sure you didn't miss anything when you copied the code.

answered 2 days ago