css Float right menu items not in hamburger menu for mobile

[Jacquelyn]

<div class="topnav" id="myTopnav">
	<div class="topnav-centered">	
		<a href="index.html">JACQUELYN MCGARRY</a>
	</div>
	<div class="topnav-right">
		<a href="shop.html">SHOP</a>
		<a href="work.html">WORK</a>
	</div>
	<a href="about.html">ABOUT</a>
	<a href="contact.html">CONTACT</a>

		<a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i>
		</a>
</div>

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

.topnav {
		position: fixed;
		top: 0;
		width: 100%;
		padding: 0px;
		}
.topnav a {
		float: left;
		display: block;
		text-align: center;
		padding: 14px 24px 12px 24px;
		}
.topnav a:hover {
		padding: 12px 22px 10px 22px;
		}
@media screen and (max-width: 600px) {
	.topnav a{
		float: none;
		display: block;
		}
	.topnav-centered a {
		position: relative;
		top: 0;
		left: 0;
		transform: none;
		}
	.topnav-right a{
		float: none;
		position: relative;
		}
	}
.topnav .icon {
		display: none;
		}
@media screen and (max-width: 500px) {
	  .topnav a:not(:first-child) {display: none;}
	  .topnav a.icon {
		float: left;
		display: block;
	  }
	}
.topnav-centered a {
		float: none;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		}
.topnav-right { 
		float: right;
		}	

@media screen and (max-width: 500px) {
  .topnav.responsive {position: fixed;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
/*    text-align: left;*/
  }
}

My float right menu items don't nest in the hamburger menu. I tried float:left on mobile for topnav-right with no luck. I have no idea how to fix it. Code has been personalized from w3schools tutorials

[niche]

Please resend the code you're actually using in the order you're using it so we can see exactly what you see.

Also, please edit out the irrelevant parts if possible.

Edited January 14, 2021 by niche

[Jacquelyn]

thank you niche, editing now

[Jacquelyn]

hello @niche! So i didn't end up changing anything, this is what I see when looking at my html and css. I removed styling elements (before posting), would it be helpful to remove anything that isn't for mobile? I wasn't sure where to cut it down. Thank you

[niche]

Great to know except solving CSS questions is a lot easier when I can use the developer tools built into every browser.  If you wrote the code, it will be easy to edit down. If not, I'd just be guessing with no real chance of helping you get the right answer based on what you sent. 

There are too many moving parts and ambiguities.  For example, what's a hamburger menu??

FYI, I loaded what you posted and what I saw looked nothing like your screen shot. 

  

Edited January 14, 2021 by niche

[dsonesuk]

I suggest you place non media query styling above the uppermost media querythe hamburger  icon should be on the right from the start using position absolute, then hidden till required using display none/block for the device width it is required.