Button is shifting after being clicked

Question

I'm having some issues with my hamburger menu. When I click on the hamburger menu (which is is a button), it shifts to the left. This happens even when I remove the animation for my hamburger menu and replace it with text, so I know that it is related to the button. I'm using the _s wordpress theme and tried to override everything I could but I can't seem to find where in the code this is happening. I think that it is a default style hidden somewhere within the _s theme code.

Here is the relivent HTML and PHP code found within my header.php file (the code still continues to have this problem if I remove myFunction and replace the div classes with text).

<nav id="site-navigation" class="main-navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false" onclick="myFunction(this)"> 
                <div class="bar1"> </div>
                <div class="bar2"> </div>
                <div class="bar3"> </div>
            </button>

            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'menu-1',
                    'menu_id'        => 'primary-menu',
                )
            );
            ?>
        </nav><!-- #site-navigation -->
        

Here is the relivent css (I tried assigning right:0 to .menu-toggle .change and it doesn't seem to be affecting anything):

 .main-navigation ul a {
            background-color:#335d92;
            width:100%;
        }
        .main-navigation li {
            float:none;
            padding-bottom:0px;
        }
        .current-menu-item a {
            border-width:0px;
    
        }
        .main-navigation ul a:hover {
            border-width:0px;
            background-color:#293859;
        }
        .main-navigation ul ul a{
            display:none;
        }
    
        #site-navigation button {
            border-radius:0px;
            background:none;
            border:0px;
            color:white;
            padding-bottom:0px;
        }
        .menu-toggle:focus, .button:focus, [type="submit"]:focus {
       outline: none;
        }
    
        .main-navigation {
            padding-top:0px;
            right:0;
        }
        .menu-toggle .change{
            right:0;
    }

Answer 1

You need to apply float to the button, and then clear on the menu navigation container. Of course you need to include those rules using a media for responsive, just for smaller screens when the menu buttons appears.

#site-navigation button{
   float:right;
 }
.menu-navigation-container {
   clear: both;
 }