Add custom secondary button to header

I am attempting to add a secondary button to my unpublished site. The button appears how I'd like it, however, it does not appear to be a part of the header. It is adopting the background of the section directly below, and mobile is a mess. I'd appreciate any and all help.

Code Injection:

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Select the header element. Adjust based on your specific template.
    var header = document.querySelector('header') || document.querySelector('.Header');

    // Check if the header exists
    if (!header) {
        console.error('Header not found');
        return;
    }

    // Create the secondary button
    var secondaryButton = document.createElement('a');
    secondaryButton.href = '#'; // Update with your desired URL
    secondaryButton.textContent = 'Log In'; // Text for the button
    secondaryButton.className = 'custom-secondary-button'; // Add a class for styling

    // Append the secondary button to the header
    header.appendChild(secondaryButton);
});
</script>

Custom CSS:

.custom-secondary-button {
    display: inline-block;
    margin-left: 0px; /* Adjust spacing as needed */
    padding: 0 30px; /* Increased horizontal padding for a wider button */
    border: 1px solid #F08E80; /* Border style */
    color: #F08E80; /* Text color */
    text-decoration: none;
    font-weight: normal;
    border-radius: 5px; /* Rounded corners */
    background-color: transparent; /* No background color */
    font-size: 0.75em; /* Font size */
    line-height: 47px; /* Match the button's height for vertical centering */
    min-height: 0; /* Remove any minimum height restrictions */
    height: 46px; /* Explicit height setting */
    margin-top: 0px; /* Adjust to align vertically with the primary button */
    font-family: 'Kepler Std', serif; /* Set the font to Kepler Std */
    white-space: nowrap; /* Prevents text from wrapping */
}

.custom-secondary-button:hover {
    background-color: #F08E80; /* Background color on hover */
    color: #0B0D5F; /* Text color on hover */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically center items in the header */
    margin-right: 30px; /* Space from the right edge */
}

Perhaps the following will provide a better result.

Be sure to remove your current code, make a copy somewhere, before installing my code.

Let us know how it goes.

Thank you! I had come across that post before I had much experience playing around on the backend, and couldn't get it to work. Now it made a ton more sense, and I got it to work! Thank you!!!!!!