Responsive Navigation Bar CSS border issues with media queries

I’ve included a jpeg showing the issue. On full web screen it looks great, but when you shrink the screen below media query breakpoint, the navigation bar is displaying with certain distortions before and after clicking the hamburger menu button for the dropdown menu.

As you can see, before clicking the menu button, there is a gap between the “Home” link and the bottom of the navbar. After clicking the menu button, the hamburger button gets gets pushed down, so it bleeds past the bottom of the navigation bar and there’s an extra 1px of border at the top.

I’ll only post the corresponding html and css for the particular problem on the page to preserve simplicity, although I won’t know how much the rest of the code affects the navigation bar. Let me know if you need the rest of the code posted.
Thanks in advance!


<!--navigation bar-->
<div class="topnav" id="myTopnav">
  <a href="C:\Users\casti\Desktop\Projectfolder\home.html" class="active">Home</a>
  <a href="C:\Users\casti\Desktop\Projectfolder\about-me.html">About Me</a>
  <a href="C:\Users\casti\Desktop\Projectfolder\services.html">Services</a>
  <a href="C:\Users\casti\Desktop\Projectfolder\pricing.html">Pricing</a>
  <a class="floatright" href="C:\Users\casti\Desktop\Projectfolder\contact.html">Contact</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>


/*navigation bar*/
.topnav {
	overflow: hidden;
	background-color: gray;
	border: solid 1px black;
.topnav a {
	float: left;
	display: block;
	text-decoration: none;
	text-align: center;
	padding: 14px 16px;
	margin: 0;
	color: white;
	border-right: solid 1px black;
.topnav .icon {
	display: none;
.topnav a:hover {
	background-color: black;
.floatright {
	float: right;
.active {
	background-color: #666666;
* {
	box-sizing: border-box;

@media screen and (max-width: 500px) {
	.topnav a:not(.active) {display: none;}
	.topnav a.icon {
		float: none;
		display: block;
		margin: auto;

@media screen and (max-width: 500px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
		border-left: solid 1px black;
		border-top: none;
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: center;
	.topnav.responsive a:not(.active) {
		border-top: solid 1px black;
	.topnav.responsive  {
		border-top: solid 1px black;


function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";