Bouton Hamburger qui fait une marge

Bonjour,

Voila je rencontre un petit problème avec mon code, j'ai mon menu hamburger d'un coté, et ma slide bar de l'autre hors j'aimerais que le bouton ne fasse pas de marge et qu'il soit en position fixed pour l'avoir sous la main lors du scroll

Ce que je fais

<!-- NAV BAR-->
            <nav class="navbar navbar-light">
                        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="#navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle Navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                        <div class="navbar-nav ml-auto">
                            <a class="nav-item nav-link active" href="#">Acceuil<span class="sr-only">(current)</span></a>
                            <a class="nav-item nav-link" href="#">Qui suis-je ?</a>
                            <a class="nav-item nav-link" href="#">Créations</a>
                            <a class="nav-item nav-link" href="#">Infos</a> 
                        </div>
                    </div>
            </nav>
        <!-- END NAV BAR-->

        <!-- SLIDER-->
        <div id="slides" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#slides" data-slide-to="0" class="active"></li>
                <li data-target="#slides" data-slide-to="1"></li>
                <li data-target="#slides" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="SRC/img/BackG1.jpg">
                    <div class="carousel-caption">
                        <h1 class="display-2 mx-auto">Welcome</h1>
                        <h3>To you Kenzo</h3>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="SRC/img/BGK2.jpg">
                </div>
                <div class="carousel-item">
                    <img src="SRC/img/BGK3.jpg">
                </div>
            </div>
            <a class="carousel-control-prev" href="#slides" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Précedent</span>
              </a>
              <a class="carousel-control-next" href="#slides" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Suivant</span>
              </a>
        </div>
        <!-- SLIDER END-->

et le code CSS

html, body {
    height: 100%;
    width: 100%;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: #222;
    background-color: #222;
}

/* BARRE DE NAVIGATION */
.navbar .navbar-light {
    background-color: rgba(0, 0, 0, 0);
}

.navbar-nav {
    font-size: 20px;
    font-family: 'Fjalla One', sans-serif;
}

.navbar-light .navbar-toggler {
    border-radius: 40px;
}

.navbar-light .navbar-toggler:hover {
    background-color: #e6e6e6;
    border-color: #bbbbbb;
    transition: 0.5s;
}

/* LES IMAGES */

.carousel-inner img {
    width: 100%;
    height: 100%;
    margin-bottom: -70px;
}

.carousel-caption {
    position: absolute;
    transform: translateY(-155%);
    color: #222;
    border: solid;
    border-color: #222;
    border-right: transparent;
    border-left: transparent;
    width: 50%;
}

@media screen and (min-height: 940px) {
    .carousel-inner img {
        margin-bottom: -15px;
    }
}

@media screen and (max-height: 938px) {
    .carousel-inner img {
        margin-bottom: -20px;
    }
}

Ce que j'obtiens

J'obtiens ceci
http://prntscr.com/vjralj