How to fix hamburger menu not moving to the right?

I am trying to move the hamburger menu to the far right, so it looks better on mobile and aligin the ul, so it's also on the right.

I have added navbar-toggler-right to the navbar-toggler and have also added navbar-nav mr-auto to the ul, but while its on the right of the text, it's still not on the right and the links are aligned to the left for some reason. Any ideas? attached screenshot

@media screen and (max-width: 600px) {
      .topnav a:not(:first-child) {display: none;}
      .topnav a.icon {
        float: right;
        display: block;}
             .navbar-text {      overflow-wrap: break-word;
    }
      
    
    }
    
    
    span.text {
        float: left;
        margin-right: 30px;
    }
    span.text p{margin-top: 15px!important;}
    
    .navbar-toggle .icon-bar{
          margin-left: auto;
       margin-top none !important;    }
    
    @media screen and (max-width: 600px) {
      .topnav.responsive {position: relative;}
      .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
          overflow-x: hidden !important;		
    
    }
    
    
    }
    @media screen and (max-width: 600px) {
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
    
    
    @media screen and (max-width: 600px) {
    img.content{   width:80%;
     border:#01009C 1px  solid; display: block; margin: 0 auto; vertical-align:middle !important;	}
     
    
    
    
    
    }
    }
    .container{	word-wrap: break-word!important;	padding:0px; background:orangered;}
    .topnav {
      overflow: hidden;
      margin-bottom: 10px; 
    }
    
    .topnav a.navbar-brand{
      display:none;
    
        vertical-align: top;
    }
    .topnav .nav-link i{
      margin-top:5px;
    }
    .topnav .nav-link img{
      margin-top:5px;
    }
    .navbar-header img{
      width:100px;
    }
    
    .topnav a {
    font-family:MuseoSans-500;
      display: inline-block;
      text-decoration: none;
      font-size: 20px;
      font-weight: normal;
    	font-style: normal;
    
    }
        
    /* 
     
    h2 { font-size:25px !important;     font-family: MuseoSans-100 !important;
        font-weight: normal;
        font-style: normal;
    clear:both;   color: orangered;
    } */
    
    .active {
    color: white;
    }
    
    .topnav .icon {
      display: none;
    }
    .navbar-text{ white-space: normal;	font-size:40px;	   color:orangered;word-wrap: break-word!important;}
    
    
    img.content{    
     border:#01009C 1px  solid; display: block; margin: 0 auto; vertical-align:middle !important;	}
     
    
      .container{background:white;overflow:hidden!important;}
    
      
      .img-fluid {
          max-width: 100%;
          height: auto;
        }
      
      @media (max-width:768px){
        .topnav a{
          font-size:18px !important;
        }
        img {  vertical-align: top!important;}
    .topnav .nav-link img, .topnav .nav-link i {margin:-4	; width:20px;}
    
      .navbar-header h1{
        font-size:35px!important; 	word-wrap: break-word!important;
    }
    
    h2{font-size:25px!important;}
    html{ overflow-x: hidden;}
    
      }
      
      .navbar
      
      @media(max-width:540px){
        .topnav a.navbar-brand{
          display: block;
        transform: translateX(43%);
        }
        
            .form-inline .form-control { 
        display: inline-block !important; 
        width: auto!important
    
      }
          .nav-item a {text-align:left!important;}
          
        .topnav .nav-link i{
        margin-top:0;
      }
      .topnav .nav-link img{
        margin-top:0;
      }
        .link1{
          display:none;
        }
        
        .navbar-header img{
        width:100px;
      }
    
    
      }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar justify-content-center">
                <div class="navbar-brand navbar-header">
                    <img class="img-fluid" src="includes/om.svg" width="100" >
                    <h1 class="navbar-text primary">Grampian Yoga Association</h1>               
                    
                 </div>
            
        </nav>
                  
    
    
        <body>
    
    <nav class="navbar navbar-expand-lg topnav " id="myTopnav">
        
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            
            <span class="navbar-toggler-icon"><i class="material-icons">
    menu
    </i></i></span>
    
                        <span class="text"><p>Toggle navigation</p></span>
                       <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        
          </button>
          
          <div class="collapse navbar-collapse navbar-default" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
        
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>">Home</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/summerclasses.php">Summer Classes</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/teachers.php">Classes and Teachers</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/seminars.php">Seminars</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/com.php">Committee</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/accounts.php">Accounts</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/about.php">About</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/membership.php">Membership</a>
              </li>
              <li class="nav-item">
            <a class="nav-link" href="<?php echo $sitepath; ?>/maintain.php">Links</a>
              </li>
              
          </div>
          
      </nav>

Solution

Try adding right: 15px; and position: absolute; to navbar-toggler-icon to move the menu to the right.

.navbar-toggler-icon {
    right: 15px;
    position: absolute;
}