Padding in the navbar while shifting the element

Hi I can't seem to be removing the background color after shifting elements. While the elements have moved and they are working perfectly but every timeenter image description here I am clicking on the sign in and sign up, the original space seems to show up as the background color.

HTML code:

<nav>      <ul>        <li><a class="active" href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>        <li><a href="#">Blog</a></li>        <li><a href="#">Categories</a>          <ul>            <li><a href="#">Romance</a></li>            <li><a href="#">Paranormal</a></li>            <li><a href="#">Thriller</a></li>            <li><a href="#">Horror</a></li>            </ul>        </li>        <li><a href="#">Reviews</a>          <ul>            <li><a href="#">Star Rating 1</a></li>            <li><a href="#">Star Rating 2</a></li>            <li><a href="#">Star Rating 3</a></li>            <li><a href="#">Star Rating 4</a></li>            <li><a href="#">Star Rating 5</a></li>          </ul>        </li>        <li><a href="#">Contest</a>          <ul>            <li><a href="#">Giveaways</a></li>            <li><a href="#">Free Books for Reviews</a></li>          </ul>        </li>        <li><a href="#">Contact Us</a>          <ul>            <li><a href="#">For Authors</a></li>            <li><a href="#">For Bloggers</a></li>          </ul>        </li>        <li><a href="#" class="signed"><i class="fa fa-user-plus" aria-hidden="true"></i>Sign Up</a></li>      <li><a href="#" class="signed"><i class="fa fa-fw fa-user"></i>Sign In</a></li>        </ul>                    </nav>  

CSS code:

    /* navigation top menu */  nav{    position: relative;    top:0;    left:0;    padding: 5px 0 0 0;    width: 100%;    font-size: 1em;  }  .active   {    background-color: #F24F1B;    color: white;  }    nav::after{    content:'';    display: block;    clear:both;  }  nav ul{    list-style: none;    margin:0;    padding:0;    position: relative;    right: 200px;    }  nav ul li:hover {    background-color: #F24F1B;  }    nav ul li:hover > ul {    display: block;  }    nav ul li a {    display: inline-block;    color:black;    padding: 10px 20px;    text-decoration: none;    width: 125px;    position: relative;  }  nav ul li a:visited {    color:black;  }  nav ul li a .active{    color: white;  }  nav ul li a:hover {    background-color: #F24F1B;    color: white;  }    nav ul ul {    position: relative;    top: 100%;    background-color: #F24F1B;    display: none;    position: relative;     right: 0px;  }    nav ul ul li {    position: relative;    border-bottom: 2px solid rgb(128, 104, 104);      }    nav ul ul ul {    left: 100%;    top: 0px;  }    /* top level */  nav>ul {    padding-left: 200px;    color:white;  }    nav>ul>li {    float: left;  }    nav>ul>li>a {    width: auto;    padding: 10px 20px 15px 20px;  }    .signed {  position: relative;  left: 300px;  }  

https://stackoverflow.com/questions/66084310/padding-in-the-navbar-while-shifting-the-element February 07, 2021 at 11:35AM