Why changes in <main> affect the <header>? - html

Question

So I'm creating a site and one of the problems is that when I change the margins for content a link from the header can be presses only in the left-margin of the screen on mobile mode.
because of this the first tag gets broken and can be pressed only in the left margin of the screen
Here is the source code: https://github.com/mcosminc/mcosminc.github.io
The problem occurs in the index.html (in the at ) and style.css ( in the #media and screen(max-width:500) )
I tried to make the text content on mobile more easy to read, but setting the margins resulted in the first tag from the navbar to get broken and only be able to be clicked in the left-margin of the screen. This problem occurs only in mobile mode, to check it more easy here is the place where I hosted it: mcosminc.github.io
Here is the Code:
#media screen and (max-width: 500px) {
.ref-text{
display: none;
}
.main:not(#article-video){
margin-left: 1rem;
margin-right: 1rem;
}
hr{
margin-left: 1rem;
width: 90%;
}
}
}
<header>
<div class="navbar">
<a class="menu-bars" id="show-menu">
<i class="fas fa-bars"></i>
</a>
<ul id="referinta">
<li class="ref-text">Impactul COVID-19 asupra antreprenoriatului și comportamentului consumatorilor</li>
</ul>
<div class="mode">
<a class="day-mode invisible">
<i class="far fa-sun icon" id="sun"></i>
</a>
<a class="night-mode">
<i class="far fa-moon icon" id="moon"></i>
</a>
</div>
</div>
<nav id="nav-menu">
<ul class="nav-menu-toggle">
<a class="menu-bars-toggle" id="hide-menu">
<i class="fas fa-bars icon-bars"></i>
</a>
<hr />
<div class="nav-section">
<li class="nav-text"></i> Home</li>
<li class="nav-text"><i class="fa fa-youtube nav-icon s-icon"></i> Youtube</li>
</div>
<hr />
<p id="copy">Creat de <br>Ciovina Mihaita Cosmin</p>
</ul>
</nav>
<script src="app.js"></script>
</header>

Answer 1

i tried your code and i didn't find your problem but i just male a suggest to use padding instead of margin.