Margin or Padding Bootstrap Menu

Question

here I come with a new problem with my menu maded with bootsrap;

The problem is the margin or the padding on the left, the menu is not align with the logo and the rest of the content; I tried a lot of modification on the CSS and no succes !

Here is the page http://www.deluxe-art.fr/test/index.html#

Here is the CSS

.header-top 	{ background-color:#FFF;}

navbar-header	{ z-index:1000!important;}

/*Disable bar effect of the menu in a small device*/
.navbar-collapse	{ border:0!important; box-shadow:none!important;}

.navbar-nav > li > a {color:#7a6b66!important; font-size:13px!important; margin-left:0px!important;
	-webkit-transition: color .2s ease-in;
    -moz-transition: color .1s ease-in;
    -o-transition: color .1s ease-in;
    transition: color .1s ease-in;}
	

	
.navbar-nav > li > a:hover {color:#231815!important;}
.navbar-nav > .active > a {background-color:#fff!important; color:#231815!important;}
.dropdown-menu > ul > li { background-color:#000!important;}

<header>
    
    <nav class="navbar navbar-default header-top">
    <div class="container">
    
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
        	<li class="active"><a href="index.html">MENU</a></li>
            <li><a href="#">MENU</a></li>
            <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">MENU<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                <li><a href="#">MENU</a></li>
                <li class="divider"></li>
                <li><a href="#">MENU</a></li>
                <li><a href="#">MENU</a></li>
                <li><a href="#">MENU</a></li>
                <li><a href="#">MENU</a></li>
                <li><a href="#">MENU</a></li>
                </ul>
                
            </li>
            <li><a href="#">MENU</a></li>
            <li><a href="#">MENU</a></li>
            <li><a href="#">MENU</a></li>
            <li><a href="#">MENU</a></li>
        </ul>
    </div>
    
    </div>
    </nav>
    
</header>

Answer 1

you can try

#bs-example-navbar-collapse-1.navbar-nav { margin: 0px 0px 0px -30px; }

Answer 2

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="http://placehold.it/150x50&text=Logo" alt="">
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

this is the nav tag inside of your header. now apply the CSS like this...

body {
    padding-top: 70px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}

.navbar-fixed-top .nav {
    padding: 15px 0;
}

.navbar-fixed-top .navbar-brand {
    padding: 0 15px;
}

@media(min-width:768px) {
    body {
        padding-top: 100px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    }

    .navbar-fixed-top .navbar-brand {
        padding: 15px 0;
    }
}

you don't have to apply margin and padding separately. And it's a bad method when you working with the bootstrap framework.

Try this it will work.