CSS not aligning items to the right even though I made it to

Question

I am trying to make a website but when I want to make the text 'Axxon' to the left of the div-header-gradient class and a href position to the right of the header, it does not work. Here's my code.

.div-header-gradient {
    display: block;
    background: linear-gradient(#7700ff, #953bff);
    height: 100px;
    width: 100%;
    margin-left: 0px;
    overflow: hidden;
    animation: animheader;
    animation-duration: 1.5s;
}

.div-header-right {
    height: 100px;
    width: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    animation: animheader;
    animation-duration: 1.5s;
}

.href-right-header-buttons {
    position: fixed;
    color: #fff;
    font-size: 26px;
    letter-spacing: 2px;
    padding-top: 34px;
    padding-bottom: 34px;
    padding-left: 12px;
    padding-right: 12px;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    margin-right: 0px;
}

<div class="div-header-gradient" style="z-index: 1000;">
        <p class="text-header-title-white" style="z-index: 1000;">
            Axxon
        </p>

        <div class="div-header-right">
            <a href="#" class="href-right-header-buttons">
                Invite Bot
            </a>
        </div>
    </div>

Answer 1

You have set position relative but you have not set where you want that relative position to be, try adding right:0; into that CSS rule .

For example to set the right hand side element, the .div-header-right class has right:0; added to it, to make the contents align to that right hand side with 0 offset.

But this class you have an anchor tag which for some bizarre reason is position:fixed so instead of moving the parent element you need to move only the fixed anchor element by setting the right:0; on here as well. I have also added top:0; so the contents of the anchor tag is pinned to the top right corner of that element.

.div-header-gradient {
    display: block;
    background: linear-gradient(#7700ff, #953bff);
    height: 100px;
    width: 100%;
    margin-left: 0px;
    overflow: hidden;
    animation: animheader;
    animation-duration: 1.5s;
}

.div-header-right {
    height: 100px;
    width: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    animation: animheader;
    animation-duration: 1.5s;
}

.href-right-header-buttons {
    position: fixed;
    color: #fff;
    font-size: 26px;
    letter-spacing: 2px;
    padding-top: 34px;
    padding-bottom: 34px;
    padding-left: 12px;
    padding-right: 12px;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    margin-right: 0px;
    right: 0; /* Add this line to push the element to the Right Hand Side */
    top:0; /* Add this line to push the element to the Top */
}

<div class="div-header-gradient" style="z-index: 1000;">
        <p class="text-header-title-white" style="z-index: 1000;">
            Axxon
        </p>

        <div class="div-header-right">
            <a href="#" class="href-right-header-buttons">
                Invite Bot
            </a>
        </div>
    </div>