How do i get this container to align right?-CodePudding

I want to get these elements to move over to the right. The name is in the correct spot I just want the 4 elements to the right to move over with some slight padding on the outside. Thanks.

here is the code snippet:

 <!-- Header/top nav bar -->
    <header >
        <nav >
            <div > Jordan DeGiacomo </div>
            <button  id="hamburger">
                <svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 17.5H0.25V14.6667H13V17.5ZM25.75 10.4167H0.25V7.58333H25.75V10.4167ZM25.75 3.33333H13V0.5H25.75V3.33333Z" fill="white"/></svg>
            </button>
            <ul  id="nav-ul">
                <li><a href="#" >Home</a></li>
                <li><a href="#languages">Languages</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#hire"><button > Hire Me </button></a></li>
            </ul>
            <a href="#hire"><button > Hire Me </button></a>
          <!--  <div >
                <svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 17.5H0.25V14.6667H13V17.5ZM25.75 10.4167H0.25V7.58333H25.75V10.4167ZM25.75 3.33333H13V0.5H25.75V3.33333Z" fill="white"/></svg>
            </div> -->
        </nav>

    <!-- side nav bar -->
    <div >
        <div >
            <nav >
                <div >
                    <a href="#" >
                        <span >Home</span>
                    </a>
                    <a href="#languages" >
                        <span >Languaages</span>
                    </a>
                    <a href="#projects" >
                        <span >Projects</span>
                    </a>
                    <a href="#hire" >
                        <span >Hire</span>
                    </a>
            </nav>

Here is a screenshot of the nav bar

CodePudding user response：

Since you already have the justify-between just wrap the stuff you want moved to the right inside a div as follows:

<nav >
    <!-- left side div -->
    <div > Jordan DeGiacomo </div>
    <!-- right side div -->
    <div>
        <button  id="hamburger">
            <svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M13 17.5H0.25V14.6667H13V17.5ZM25.75 10.4167H0.25V7.58333H25.75V10.4167ZM25.75 3.33333H13V0.5H25.75V3.33333Z"
                    fill="white" />
            </svg>
        </button>
        <ul  id="nav-ul">
            <li><a href="#" >Home</a></li>
            <li><a href="#languages">Languages</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#hire"><button > Hire Me </button></a></li>
        </ul>
        <a href="#hire"><button > Hire Me </button></a>
    </div>
</nav>

CodePudding user response：

Try using CSS to style the element -

/* for float allignment */
element {
  float: right;
}

Or for absolute positioning

element {
  position: absolute;
  right: 0;
}