center align doesn't work on the Bootstrap on the navigation bar

I'm new to Bootstrap , I'm trying to write a simple web page contains a navigation , side navigation ..

I need the "triMago" Branch image to be in the center of the navigation bar

but it doesn't work on common solutions like margin : auto;

I'm new to the StackOverFlow as well , Please tell me if something I did wrong , thanks.

my code :

<body>

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="130">
    <div class="container-fluid">
        <div class="navbar-header" >
            <a class="navbar-brand" href="#" id="logo">
                <img src="https://imgur.com/download/8WZa7jf" alt="logo" >
            </a>
        </div>
        <nav class="nav nav-pills" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" id="homepage" class="navButton"> Home</a></li>
                <li><a href="#" id="about" class="navButton"> About us</a></li>
            </ul>
        </nav>
    </div>
</nav>

<div class="container-fluid text-center">
    <div class="row content">
        <div class="col-sm-10 text-left">
            <h1>Welcome</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <hr>
            <h3>Test</h3>
            <p>Lorem ipsum...</p>
        </div>
        <div class="col-sm-2 sidenav">
            <div class="well">
                <p>ADS</p>
            </div>
            <div class="well">
                <p>ADS</p>
            </div>
        </div>
    </div>
</div>

<footer class="container-fluid text-center">
    <p>WaterBall &copy; MingChang Homework-Purpose</p>
</footer>

my css :

/* Remove the navbar's default margin-bottom and rounded borders */
    .navbar {
        height: 130px;
        background-color: #FFF;
        border-bottom: 3px solid gray;
    }

    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {
        height: 70%;
    }

    /* Set gray background color and 100% height */
    .sidenav {
        padding-top: 20px;
        background-color: #f1f1f1;
        height: 100%;
    }

    /* Set black background color, white text and some padding */
    footer {
        background-color: #555;
        color: white;
        padding: 15px;
    }

    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
        .sidenav {
            height: auto;
            padding: 15px;
        }

        .row.content {
            height: auto;
        }
    }

    .affix {
        top: 0;
        width: 100%;
    }

    #logo{
         margin: auto;
    }

all solutions are effective but just to the small-size screen , when I scale it to the large-size , it goes back to the left side ...

Solution

This is 100% working answer for your full-width screen also with best practices.

Step: 1 replace your <div> tag of class name 'navbar-header' with the following in your .html file:

<div class="navbar-header navbar-custom">

Step: 2 replace your the <a> tag with the following one in .html file:

<a class="navbar-brand image-anchor" href="#" id="logo">

Step: 3 Now, add the following code in your css file:

.image-anchor, .navbar-custom {
   width: 100%;
}

.image-anchor img {
   margin: 0 auto;
}

Best Practices: Never use id-selector in css. Always use class-selector for best practices in css. Please, delete the following from your .css file

#logo{
         margin: auto;
    }

this is updated jsfiddle : https://jsfiddle.net/ro49t472/4/