Dziwny problem, kiedy zwężę okno przeglądarki i aktywują się ostatnie media queries dla szerokości max 600px linki zaczynają szwankować raz działają a raz nie, ostatni link- kontakt prawie nigdy. Dlaczego tak się dzieje przy ostatnich media queries i czemu w narzędziach dla programistów działa normalnie, kiedy włączę tryb responsywny lub symuluję dowolne urządzenie? Nic nie rozumiem 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>strona</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<h1 class="logo">Logo</h1>
<a class="burger-menu" href="#">MENU</a>
<ul class="main-nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="content">
<div id="home" class="menu-target">
<h1>Home</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quam dolore maiores. Nesciunt quo ipsum odit? Nemo repudiandae
nulla, velit iste architecto ea ab fugiat. Nostrum aut earum officia deserunt numquam necessitatibus explicabo ut fugit,
expedita quaerat dolore, accusantium quis nulla, nam doloribus! Eos repellendus rem id hic alias quam fugiat veritatis
similique, praesentium aliquam voluptatem ipsum nam at suscipit voluptatum reiciendis veniam architecto cupiditate temporibus
iure doloribus atque! Maiores minima voluptatum dolorem, et provident, quis, quia aperiam, porro nostrum iste aliquid
quasi. Ut saepe perspiciatis culpa, quos natus soluta excepturi voluptate alias error architecto quia dolor quidem odio
in voluptatem, nihil magni, cum vel sint inventore distinctio eos. Enim reiciendis incidunt doloremque culpa temporibus
quam ratione debitis nam eum. Placeat sit doloribus deserunt odio, dolore consectetur voluptates porro dolorem labore
provident minus, maxime recusandae nam consequuntur delectus itaque quia autem quidem veritatis natus. Qui tempore quas
sed maiores doloribus aperiam, cupiditate dolorum eius ea impedit, nam dolor quae cum sunt consequatur voluptatum, maxime
provident dicta ipsum asperiores accusamus aliquam ad ex velit ratione? Quis ratione soluta illo eligendi fugit modi rerum
totam necessitatibus consequuntur, impedit eius ab error consectetur corrupti minima quia? Quia debitis consectetur voluptatem
molestias necessitatibus, laudantium.</p>
<div id="about" class="menu-target">
<h1>About</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere dignissimos ab impedit, odit doloribus odio dicta cupiditate,
perspiciatis voluptatibus mollitia ipsam minima magnam optio sint doloremque expedita assumenda fugiat. Repudiandae, sed?
Magni officia quaerat optio? Vero iusto distinctio corporis, at repudiandae cumque. Tempore suscipit mollitia impedit,
laborum commodi, in! Eaque eveniet, adipisci dignissimos nihil rem nam maxime, beatae accusamus non voluptatum, illum
repudiandae dicta sunt animi illo, totam odit. Sequi facere minus, debitis delectus, dolorum reprehenderit eligendi fugit
at, vero ipsam, corrupti? Omnis molestias expedita laudantium, sequi debitis sunt, enim in, ipsam nisi dolorum ipsa asperiores
placeat perspiciatis, aut. Debitis, sed accusamus iusto inventore cupiditate obcaecati facere maiores quibusdam, assumenda
veritatis ea iste laboriosam et. Eos facilis, fugit velit vel magni unde quia tenetur provident odit consequuntur, voluptas
optio doloremque esse reprehenderit tempore quasi veniam earum aliquid! Corporis officia, cum similique. Nam repellendus
minima mollitia doloremque voluptates deserunt, soluta accusantium consequatur expedita error nihil, impedit omnis optio
sed, eveniet porro ad facere nobis aperiam veritatis? Maxime ab numquam beatae, perferendis vero sequi quis, natus odit.
Rerum natus error laudantium unde labore nesciunt, consequuntur iste molestiae placeat reiciendis obcaecati blanditiis
facilis quisquam beatae accusamus reprehenderit eum cum similique ullam at ad!</p>
<div id="projects" class="menu-target">
<h1>Projects</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod corporis, architecto. Ad odit, deserunt reiciendis neque
consequatur quis. Impedit pariatur quis magnam rerum tenetur veritatis et saepe consequatur non explicabo repellendus,
itaque voluptatem optio quidem ipsum eaque omnis ut ab quo, consectetur reiciendis cupiditate eius odit dolores modi!
Error neque, fuga quidem molestiae placeat debitis dolor, quae, temporibus adipisci alias architecto nostrum eum, molestias
eius quisquam mollitia ex! Culpa minus, architecto suscipit dolore placeat modi officia eveniet harum in hic iusto ad
sunt optio, similique quia unde quisquam praesentium beatae reprehenderit tenetur, quos blanditiis vero fugit. Voluptates
ipsam, rem deserunt et assumenda repellendus quos omnis magni corporis suscipit ullam a atque dicta perferendis. Exercitationem
ut pariatur impedit. Cum repudiandae, autem, provident iure aliquid quod officiis, at doloribus tempore tenetur quibusdam
cumque, minus facere officia omnis laboriosam eum est possimus nulla vitae odit aspernatur dicta! Ratione recusandae eos
voluptate modi itaque praesentium soluta reiciendis numquam, commodi id, quos. Consequatur molestiae dignissimos voluptates
accusamus pariatur libero ratione illum est deserunt vero eos corrupti, cumque, vitae ea consequuntur nulla recusandae
blanditiis possimus minus veritatis delectus et at quod aliquid! Cum facere tenetur ipsa ex consequatur. Ex illo et reprehenderit.
Nisi esse modi maxime.</p>
<div id="contact" class="menu-target">
<h1>Contact</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident assumenda eaque quo quaerat illum dicta voluptatem,
cumque eveniet fugit repellat perferendis, sint asperiores porro! A tenetur, veniam doloremque laudantium. Illum praesentium
dolores commodi reiciendis veritatis ex fugiat totam quae ipsum, laborum ipsa officiis quas accusantium, consequuntur
neque assumenda aperiam voluptatibus. Laudantium veniam, deserunt porro ratione omnis delectus sequi nostrum sapiente
est, enim temporibus totam, a, alias optio. Eum doloremque ducimus ea neque. Hic, officia repudiandae alias perspiciatis
fuga veritatis eos animi a nobis delectus pariatur illo iusto itaque labore obcaecati harum, molestiae beatae sunt voluptas
magnam reiciendis ad nesciunt magni! Natus laudantium modi, numquam, ipsam labore voluptatibus cupiditate accusantium,
repellat a, quidem tempora. Assumenda pariatur, aliquid repudiandae nemo animi eaque totam voluptas itaque recusandae
inventore vel sit similique, eos, consequuntur atque ut deleniti! Quaerat, quos? Fuga minima minus dolorum id accusamus
</p>
</div>
</body>
</html>
body, ul,li, h1, nav, div{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
.burger-menu {
display: none;
}
.burger-menu a:hover{
background: #353535;
}
nav{
background: #222;
font-size: 1.1rem;
position: fixed;
top: 0;
width: 100%;
}
.main-nav{
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.logo{
float: left;
line-height: 70px;
padding-left: 40px;
color: papayawhip;
background: #222;
}
.main-nav li a{
display: block;
line-height: 70px;
text-decoration: none;
padding: 0 20px;
width: 80px;
text-align: center;
color: papayawhip;
background: #222;
}
.main-nav li a:hover{
background: #444;
}
.content{
margin-top: 80px;
}
.menu-target{
margin-top: -80px;
padding-top: 80px;
}
@media screen and (max-width: 800px){
.logo{
float: none;
text-align: center;
padding: 0;
height: 25px;
padding-bottom: 25px;
margin-bottom: 15px;
}
.main-nav{
justify-content: space-between;
}
.main-nav li a{
line-height: 40px;
}
.content{
margin-top: 110px;
}
.menu-target{
margin-top: -110px;
padding-top: 110px;
}
}
@media screen and (max-width: 600px){
.logo{
position: absolute;
float: left;
line-height: 50px;
font-size: 0.9rem;
padding-left: 30px;
}
.burger-menu{
display: block;
text-decoration: none;
text-align: center;
background: #222;
color: papayawhip;
line-height: 50px;
}
.main-nav{
flex-flow: column nowrap;
justify-content: initial;
}
.main-nav{
height: 0;
transition: height 0.5s;
overflow: hidden;
}
.burger-menu:focus ~ .main-nav{
height: 160px;
margin: 0;
padding: 0;
}
.main-nav li a{
margin: 0;
padding: 0;
width: 100%;
}
.content{
margin-top: 55px;
}
.menu-target{
margin-top: -60px;
padding-top: 60px;
}
}
