Elemente unterschiedliche Position in Chrome und Firefox mit CSS zurückgesetzt

Question

Wieder stoße ich auf ein Problem beim Erstellen meiner Protofolio-Seite. Ich habe meinen Code beim Einchecken in Firefox erstellt - so sieht meine Website nun gut aus, aber in Chrome ist das anders - allerdings nur in sehr wenigen Teilen. Ich werde einige Bilder hinzufügen, damit Sie sehen können, was sich unterscheidet: This is how it should look aber this is how it looks in Chrome Ich habe ein ähnliches Problem in der Fußzeile.

Ich habe bereits einen CSS-Reset verwendet und meinen Code durchsucht, aber ich kann einfach nicht den Fehler finden? Es ist wie es plötzlich mehr Ränder sind, so dass Chrome die Elemente bewegt. Hier

ist der HTML-Code für die navbar:

<!--Nav--> 
    <nav> 
     <div class="nav-links"> 
      <a href="#start"><img src="images/Bildmarke.svg" alt="home"></a> 
      <p>lisa röhl</p> 
     </div> 
     <div class="nav-rechts"> 
      <ul id="nav-ul"> 
       <li><a class="nav" id="nav-work" href="#work">work</a></li> 
       <li><a class="nav" id="nav-skills" href="#skills">skills</a></li> 
       <li><a class="nav" id="nav-about" href="#about">about</a></li> 
       <li><a class="nav" id="nav-contact" href="#contact">contact</a></li>    

      </ul> 
     </div> 
    </nav> 

und der CSS-Teil: default:

/*NAV*/ 
nav{ 
    height:10vh; 
    position: relative; 
    z-index:9000; 
    background-color:#e4e0da; 
    width:100%; 
    clear:both; 
} 
.nav{ 
    text-decoration:none !important; 
    color:#2b3534 !important; 
    font-size:4vh; 
} 
.nav-links{ 
    float:left; 
} 
.nav-links p{ 
    display:none; 
    position: relative; 
} 
.nav-links img{ 
    width:15vh; 
    margin-top:10%; 
    margin-left:2%; 
} 
.nav-rechts{ 
    right:0; 
    bottom:0; 
    position: absolute; 
} 
.nav-rechts ul, li{ 
    list-style-type: none; 
    display:table; 
    padding:auto; 
} 
.nav-rechts li{ 
    margin-left:3vw; 
    float:left; 
} 
#nav-ul{ 
    margin-right: 5%; 
    bottom:0; 
    margin-bottom:0 !important; 
} 

.nav-hover{ 
    color:#e76600 !important; 
} 
.main-nav-scrolled{ 
    position: fixed; 
    top:0; 
    width:100%; 

} 

und Tablet-Änderung:

.nav{ 
    color:#2b3534 !important; 
    font-size:3vh; 
} 
.sticky-nav ul{ 
    margin: 4.5% 1% 0 0; 
} 
.nav-hover{ 
    color:#e76600 !important; 
} 

und Desktop:

.nav{ 
    font-size:3.5vh; 
} 
.nav-links p{ 
    font-size:5vh; 
    color:#2b3534; 
    display:inline-block; 
    position: absolute; 
    bottom:0 !important; 
    margin-bottom:0 !important; 
} 
.nav:hover{ 
    color:#e76600 !important; 
} 

Wenn Sie auch den Code für die Fußzeile benötigen, sagen Sie es bitte - ich nehme an, sie haben beide den gleichen Fehler. Und bitte beachten Sie, dass ich nicht die breackpoints jetzt doublechecked haben, so könnte es immer noch Dinge, die Doppel ^^‘

Answer 1

Ok, so dass ich nun festgestellt, das Problem: Chrome ein Problem mit schwimmendem zu haben scheint und eine bestimmte Marge. Also änderte ich gerade diesen Teil:

#nav-ul{ 
margin-right: 5%; 
bottom:0; 
margin-bottom:0 !important; 

}

dazu:

#nav-ul{ 
    right: 5%; 
    bottom:0; 
    margin-bottom:0 !important; 
} 

Also im Grunde nur von margin-right Wechsel genau richtig (da ich absolut bin Positionierung).