'How do i get this container to align right?

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 class="py-6">
        <nav class="container flex justify-between items-center mx-auto px-8 md:px-14 lg:px-10 w-full">
            <div class="me-auto text-lg font-bold"> Jordan DeGiacomo </div>
            <button class="hidden" 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 class="hidden md:flex space-x-12 items-center" id="nav-ul">
                <li><a href="#" class="text-selected-text">Home</a></li>
                <li><a href="#languages">Languages</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#hire"><button class="px-6 py-2 bg-theme font-bold"> Hire Me </button></a></li>
            </ul>
            <a href="#hire"><button class="px-4 py-1 font-bold bg-theme md:hidden"> Hire Me </button></a>
          <!--  <div class="md:hidden">
                <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 class="container mt-16 flex justify-between items-center mx-auto px-8 md:px-14 lg:px-10 w-full">
        <div class="flex flex-wrap md:flex-nowrap">
            <nav class="inline-block lg:mr-24 lg:w-4 fixed left-percentage hidden xl:block">
                <div class="absolute left-50 transform -translate-x-1/2 space-y-6 mt-36">
                    <a href="#" class="nav-dot selected-circle block w-7 h-7 rounded-full border-4 border-nav bg-body">
                        <span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Home</span>
                    </a>
                    <a href="#languages" class="nav-dot block w-7 h-7 rounded-full border-4 border-nav bg-body">
                        <span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Languaages</span>
                    </a>
                    <a href="#projects" class="nav-dot block w-7 h-7 rounded-full border-4 border-nav bg-body">
                        <span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Projects</span>
                    </a>
                    <a href="#hire" class="nav-dot block w-7 h-7 rounded-full border-4 border-nav bg-body">
                        <span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Hire</span>
                    </a>
            </nav>

Here is a screenshot of the nav bar

javascripthtmlcsstailwind-css


Solution 1:[1]

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

<nav class="container flex justify-between items-center mx-auto px-8 md:px-14 lg:px-10 w-full">
    <!-- left side div -->
    <div class="me-auto text-lg font-bold"> Jordan DeGiacomo </div>
    <!-- right side div -->
    <div>
        <button class="hidden" 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 class="hidden md:flex space-x-12 items-center" id="nav-ul">
            <li><a href="#" class="text-selected-text">Home</a></li>
            <li><a href="#languages">Languages</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#hire"><button class="px-6 py-2 bg-theme font-bold"> Hire Me </button></a></li>
        </ul>
        <a href="#hire"><button class="px-4 py-1 font-bold bg-theme md:hidden"> Hire Me </button></a>
    </div>
</nav>

Solution 2:[2]

Try using CSS to style the element -

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

Or for absolute positioning

element {
  position: absolute;
  right: 0;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 marc_s

Related Questions