how do I put my logo on the left side of my links?

My logo is not fixed to the left side of my links, it keeps floating, when I change the size of the screen, and I can not put it right. I want to leave it fixed so that when I decrease the size of the screen I can see correctly all my links from my page. What is happening is that for some reason I can not leave it to the left side. Can anyone help me with this ?

body,h1,h2,h5,p,ul,li,a {
        margin: 0px;
        padding: 0px;
    
    }
    body {
        font-family: "Nunito", Helvetica, Arial;
        color: #222222;;
    }
    ul {
        list-style: none;
    }
    a {
        text-decoration: none;
    }
    img {
        display: block;
        max-width: 100%;
    }
    * {
        box-sizing: border-box;
    }
    img {
        display: block;
        max-width: 100%;
        
    }
    * {
        box-sizing: border-box;
    }
    .menu-bg {
        background: #00004d;
        height: 50px;
    }
    .menu {
        max-width: 2000px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
/*         padding-top: 10px; */
        align-items: center;
        position: relative;
    }
    .menu a {
        color: #FFFFFF;
        font-size: 15px;
    }
    .menu-logo a {
        font-size: 3em;
        font-weight: bold;
        margin: 0 10px;
        float:left;
        
    }

    .menu-logo img{
/*         margin-left:100px; */
    width: 159px;
    height: 24px;
    margin-top: 11px;
    }

    .column{
        min-height: 200px;
        flex-direction: column;
    }
    .flex-start {
        justify-content: flex-start;
    }
    h1 {
        text-align: center;
        margin: 50px 0 0 0;
        font-size: 1.25em;
        font-weight: normal;
        justify-content: center;
        width: 100%; 
    }
    .center {
        justify-content: center;
    }
    .stretch{
        align-content:stretch;
    }
    .container-grande{
        max-width: 1000px;
        max-height: 600px;
        margin: 40px auto;
        display: flex;
        border: 0px solid #ccc;
        padding: 00px 00px 500px 00px; 
        background: #F5F5F5; 
    }
    .container-grande item {
        max-width: 420px;
        margin: 0 auto;
        justify-content: center;
    }
    .container-grande h1{
        border-bottom: 0px solid #ccc;   
        text-align:left;
        flex: 1 1 400px;
        font-size: 1.25em;
        
    }
    .container-cor {
        width: 97%;
        border-bottom: 1px solid;
        margin-left: 15px;
    }
    .item {
        flex: 1;
        text-align: center;
        font-size: 1.5em;
    }

    .flex {
        flex: 0;
    }

    .imagem-chave{
        padding-top: 100px;
        margin-bottom: 300px;
        display:flex;
        justify-content: space-evenly;        
    }

    .container-grande_img{
    
        border-top: 2px solid #0000FF;
        border-bottom: 2px solid #0000FF;
        border-left: 2px solid #0000FF;
        border-right: 2px solid #0000FF;
        margin-top: 20px;
        padding-bottom: 5px;
        width: 30%;
        height: 50%;
        display: inline-block;
        justify-content: space-around;
        flex-wrap: wrap;
        
    }
    .botao{
        margin-top:-30px;
    }

    .legend {
        width: 60px;
        font-size:14px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color:#00004d;
    }

    .label {
        display: inline;
        padding: .2em .6em .3em;
        font-size: 50%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
    }

    div.inputbutton {
    position: relative;
    display: inline-block;
    
    }

    div.inputbutton input {
    background: url('/img/MYimg.png') no-repeat;
    cursor: pointer;
    width: 100px;
    height: 130px;
    border: none;
    background-size: 100%;
    }

    span.text {
    position: absolute;
    bottom: 10%;
    left: 5px;
    width: 100%;
    font-size: 15px;
    color: white;
    }
    #myNavbar{
        font-size: 15px;
    }

/* Add an active class to highlight the current page */
.active {
    background-color: #4CAF50;
    color: white;
}
 
.navbar-header .navbar-toggle{
    background:white;
    margin-right: -50px;
    margin-bottom: -20px;
}
.navbar-header {
    position: absolute;
    right: 55px;
    top: 0;
}
.navbar-header .navbar-toggle .icon-bar {
    background: black;
}
.menu-nav ul li a:hover{
    background: transparent;
    color: grey;
}

<header class="menu-bg navbar">
    <div class="menu ">
        <div class = ""> 
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
        </button>
    </div>
        <div class="menu-logo">
            <img src="img/MYLOGO.png">
        </div>
        <div class="menu-nav">
                <div class=" collapse navbar-collapse" id="myNavbar" >
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#chaves">LINK_1</a>
                        </li>
                        <li>
                            <a href="#usuarios">LINK_2</a>
                        </li>
                        <li>
                            <a href="#relatorios">LINK_3</a>
                        </li>
                        <li>
                            <a href="#permissoes">LINK_4</a>
                        </li>
                        <li>
                            <a  href="#devolver">LINK_5</a>
                        </li>
                        <li>
                            <a  href="#deslogar">LINK_6</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>