My navbar links not floating the way I want - html

Question

I'm working on a website. For some reason, my navbar isn't being very cooperative. I have set up links to other pages on the site, and have floated them to the right. However, they don't seem to move as far right as I want them to. If I use margin-right or left, then when I resize the browser it isn't responsive. But the float property keeps it responsive even though it stays around the center of my nav. Here's my code:
/* Start Variables */
:root{
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper{
width: 100%;
padding: 2% 10%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
z-index: 100;
position: relative;
}
.leftside{
float: left;
width: 50%;
}
.rightside{
float: right;
width: 50%;
}
.options{
text-decoration: none;
}
.linkhome{
font-size: 120%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkfood{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu:hover{
color: var(--aa-color);
}
.linkabout:hover{
color: var(--aa-color);
}
.linkfood:hover{
color: var(--aa-color);
}
.linkculture:hover{
color: var(--aa-color);
}
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300&display=swap" rel="stylesheet">
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
Home
Menu
About Us
Our Food
Ethiopian Culture
</div>
</div>
</div>
</nav>
```
Any help is greatly appreciated
Thanks!

Answer 1

Try this sample, float is not a preferred way of laying out elements in a modern web. Please use flex-box;
The cause of the width to the right is caused by the padding: 2% 10%;, which I have modified.
Remove the visual backgrounds.
nav{
width:100%;
}
.navbar-wrapper{
background: blue;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
z-index: 100;
position: relative;
}
.leftside{
background: green;
width: 50%;
height: 10px;
}
.rightside{
width: 50%;
background: red;
}
.options{
background: yellow;
text-decoration: none;
width: 100%;
display: flex;
justify-content: flex-end;
}
.linkhome{
font-size: 120%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkfood{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu:hover{
color: var(--aa-color);
}
.linkabout:hover{
color: var(--aa-color);
}
.linkfood:hover{
color: var(--aa-color);
}
.linkculture:hover{
color: var(--aa-color);
}

Answer 2

/* Start Variables */
:root{
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper{
width: 100%;
/* padding: 2% 10%; you need to change padding to position to the right correctly */
padding: 20px 10px;;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
z-index: 100;
position: relative;
}
/* you don't need float
.leftside{
float: left;
width: 50%;
}
.rightside{
float: right;
width: 50%;
}*/
.rightside{
/*to position your links to the right*/
text-align: right;
}
.options{
text-decoration: none;
}
.linkhome{
font-size: 120%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
/* if you want all links in one line use inline instead*/
display: inline;
}
.linkmenu{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkabout{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkfood{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkculture{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkmenu:hover{
color: var(--aa-color);
}
.linkabout:hover{
color: var(--aa-color);
}
.linkfood:hover{
color: var(--aa-color);
}
.linkculture:hover{
color: var(--aa-color);
}
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
Home
Menu
About Us
Our Food
Ethiopian Culture
</div>
</div>
</div>
</nav>

Answer 3

.options {
text-align: right;
}