css - how to center dropdown navbar, and make it still responsive? -

how center dropdown navbar, , make still responsive? try every method found on site, , internet, still cant fix problem, 1 method fix problem make nav bar not responsive

body {      color: #ffffff;      background-color: #000000;    }    h1 {      color: white;      font-family: "orator std";      font-size: 44px;      letter-spacing: 0px;      line-height: 8px;  }    h2 {      color: white;      font-family: "orator std";      font-size: 19px;      letter-spacing: 0px;      line-height: 1px;  }        h3 {      color: white;      font-family: "orator std";      font-size: 14px;      letter-spacing: 1px;      margin-right: 100px;      margin-left: 100px;  }      h4 {      color: white;      font-family: "orator std";      font-size: 19px;      letter-spacing: 0px;      text-align: center;  }    h5 {      color: white;      font-family: "orator std";      font-size: 19px;      letter-spacing: 0px;  }        .thumbnail {        color: white;      background-color: #414141;      border-color: rgb(44, 44, 44);    }    .thumbnail .caption {    padding: 9px;    color: white;    margin-top: -14px;     }    .navbar-brand {       margin-top: 15px;       max-width: 30px;       padding: 0;       max-height: 30px;    }    .img-responsive {margin:0 auto;   }    .btn {      color: #ffffff;      text-align: center;  }  .btn:active {        color: red !important;  }    .btn:hover {      color: #8e8e8e;  }    .navbar {      border-radius: 0px;      border-width: 0px;      margin-top: 20%;      font-family: "orator std";      font-size: 18px;      color: #ffffff;      background-color: #000000;      vertical-align: center;      text-align: center;      margin-top: 0%;  }          .navbar li {      color: #ffffff !important;  }    .navbar li a:hover {        color: gray !important;  }    .navbar-inner, .navbar .btn-navbar {      background: #ffffff  }    .navbar-inverse .navbar-nav>li>a {        border-bottom: white !important;      border-radius: 5px !important;    }      .dropdown-menu {        color: #ffffff;      background-color: #000000;    }    .dropdown-submenu {      position: relative;      }      .dropdown-submenu > .dropdown-menu {      top: 0;      left: 100%;      margin-top: -6px;      margin-left: -1px;      -webkit-border-radius: 0px;      -moz-border-radius: 0px 6px 6px 6px;      border-radius: 0px;      }  .dropdown-submenu:hover > .dropdown-menu {      display: block;  }  .dropdown-submenu > a:after {      display: block;      content:" ";      float: right;      width: 0px;      height: 0px;      border-color: transparent;      border-style: solid;      border-width: 5px 0px 5px 5px;      border-left-color: #cccccc;      margin-top: 5px;      margin-right: -5px;    }  .dropdown-submenu:hover > a:after {      border-left-color: #ffffff;    }  .dropdown-submenu.pull-left {      float: none;  }  .dropdown-submenu.pull-left > .dropdown-menu {      left: -100%;      margin-left: 10px;      -webkit-border-radius: 6px 0px 6px 6px;      -moz-border-radius: 6px 0px 6px 6px;      border-radius: 6px 0px 6px 6px;  }  @media screen , (max-width: 768px) {      .navbar .navbar-collapse {          text-align: left;          padding-left: 43%;      }      .dropdown-submenu {          padding-left: 44%;      }      .navbar .navbar-collapse .dropdown .dropdown-menu {          padding-left: 45%;      }  }      #the-slider img{      width: 100%;    padding-left: 10%;    padding-right: 10%;    padding-top: 10%;  }      .navbar-nav li{      position: relative  }    .navbar-nav li:not(:last-child):after{      content: '';      position: absolute;      right: 0px;      width: 1px;      height: 50%;      top: 20%;      background: white;  }    .dropdown-menu li:not(:last-child):after{      content: '';      position: absolute;      right: 0px;      width: 0px;      height: 50%;      top: 20%;      background: red;  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">      <link href="css/custom.css" rel="stylesheet">            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>             </head>    <body>    <nav role="navigation" class="navbar navbar-inverse"> <!-- start navigation button -->      <!-- brand , toggle grouped better mobile display -->      <div class="navbar-header">          <button type="button" data-target="#navbarcollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">toggle navigation</span>   <span class="icon-bar"></span>   <span class="icon-bar"></span>   <span class="icon-bar"></span>            </button>                           <a href="index.html" class="pull-left"><img src="images/logonav1.png"></a>        </div>      <!-- collection of nav links, forms, , other content toggling -->        <div id="navbarcollapse" class="collapse navbar-collapse">          <ul class="nav navbar-nav navbar-center">              <li class="#"><a href="#"><b><i>home</b></i></a>                </li>                            <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"><b><i>collection </b></i><b class="caret"></b></a>                    <ul role="menu" class="dropdown-menu">                                <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i><b><i>all collection portfolio</b></i></a>                                                </li>                      <li class="divider"></li>                      <li><a href="#"><i class="fa fa-trash-o fa-fw"></i>collection 1</a>                                            </li>                      <li><a href="collection2.html"><i class="fa fa-pencil-square-o fa-fw"></i>collection 2</a>                        </li>                      <li><a href="#"><i class="fa fa-paper-plane-o  fa-fw"></i>collection 3</a>                                  </li>                      <li class="divider"></li>                      <li><a href="#"><i class="fa fa-trash-o fa-fw"></i>cita tenun indonesia</a>                        </li>                    </ul>              </li>                            <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">things <b class="caret"></b></a>                    <ul role="menu" class="dropdown-menu">                      <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> inbox</a>                        </li>                      <li><a href="#"><i class="fa fa-pencil-square-o  fa-fw"></i> drafts</a>                        </li>                      <li><a href="#"><i class="fa fa-paper-plane-o  fa-fw"></i> sent items</a>                        </li>                      <li class="divider"></li>                      <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> trash</a>                            <li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> profile</a>                                <ul class="dropdown-menu">                                  <li><a href="#"><i class="fa fa-calendar-o fa-fw"></i> account</a>                                    </li>                                  <li><a href="#"><i class="fa fa-folder-open-o  fa-fw"></i> users</a>                                    </li>                                  <li><a href="#"><i class="fa fa-file-o fa-fw"></i> login</a>                                    </li>                              </ul>                          </li>                      </li>                  </ul>                  <li><a href="#">about</a>                              </li>              <li><a href="#">contact us</a>              </li>              </li>          </ul>                    </ul>      </div>  </nav> <!-- end navigation button-->          <!-- javascript -->      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>    </body>

the problem boostrap sets navbar-nav , navbar-nav li elements float: left;, forces both align left.

you'd need override bootstrap styles min-width: 768px media query setting float property none !important on selectors, , add display: inline-block !important; navbar-nav element.

you need use media query in order apply changes only when viewport 768px or bigger.

the css rules need add stylesheet should this:

@media (min-width: 768px) {   .navbar-nav > li {     float: none !important;     display: inline-block !important;   }   .navbar-nav {     float: none !important;   } } 

and applied html:

body {    color: #ffffff;    background-color: #000000;  }  h1 {    color: white;    font-family: "orator std";    font-size: 44px;    letter-spacing: 0px;    line-height: 8px;  }  h2 {    color: white;    font-family: "orator std";    font-size: 19px;    letter-spacing: 0px;    line-height: 1px;  }  h3 {    color: white;    font-family: "orator std";    font-size: 14px;    letter-spacing: 1px;    margin-right: 100px;    margin-left: 100px;  }  h4 {    color: white;    font-family: "orator std";    font-size: 19px;    letter-spacing: 0px;    text-align: center;  }  h5 {    color: white;    font-family: "orator std";    font-size: 19px;    letter-spacing: 0px;  }  .thumbnail {    color: white;    background-color: #414141;    border-color: rgb(44, 44, 44);  }  .thumbnail .caption {    padding: 9px;    color: white;    margin-top: -14px;  }  .navbar-brand {    margin-top: 15px;    max-width: 30px;    padding: 0;    max-height: 30px;  }  .img-responsive {    margin: 0 auto;  }  .btn {    color: #ffffff;    text-align: center;  }  .btn:active {    color: red !important;  }  .btn:hover {    color: #8e8e8e;  }  .navbar {    border-radius: 0px;    border-width: 0px;    margin-top: 20%;    font-family: "orator std";    font-size: 18px;    color: #ffffff;    background-color: #000000;    vertical-align: center;    text-align: center;    margin-top: 0%;  }  .navbar li {    color: #ffffff !important;  }  .navbar li a:hover {    color: gray !important;  }  .navbar-inner,  .navbar .btn-navbar {    background: #ffffff  }  .navbar-inverse .navbar-nav>li>a {    border-bottom: white !important;    border-radius: 5px !important;  }  .dropdown-menu {    color: #ffffff;    background-color: #000000;  }  .dropdown-submenu {    position: relative;  }  .dropdown-submenu > .dropdown-menu {    top: 0;    left: 100%;    margin-top: -6px;    margin-left: -1px;    -webkit-border-radius: 0px;    -moz-border-radius: 0px 6px 6px 6px;    border-radius: 0px;  }  .dropdown-submenu:hover > .dropdown-menu {    display: block;  }  .dropdown-submenu > a:after {    display: block;    content: " ";    float: right;    width: 0px;    height: 0px;    border-color: transparent;    border-style: solid;    border-width: 5px 0px 5px 5px;    border-left-color: #cccccc;    margin-top: 5px;    margin-right: -5px;  }  .dropdown-submenu:hover > a:after {    border-left-color: #ffffff;  }  .dropdown-submenu.pull-left {    float: none;  }  .dropdown-submenu.pull-left > .dropdown-menu {    left: -100%;    margin-left: 10px;    -webkit-border-radius: 6px 0px 6px 6px;    -moz-border-radius: 6px 0px 6px 6px;    border-radius: 6px 0px 6px 6px;  }  @media screen , (max-width: 768px) {    .navbar .navbar-collapse {      text-align: left;      padding-left: 43%;    }    .dropdown-submenu {      padding-left: 44%;    }    .navbar .navbar-collapse .dropdown .dropdown-menu {      padding-left: 45%;    }  }  #the-slider img {    width: 100%;    padding-left: 10%;    padding-right: 10%;    padding-top: 10%;  }  .navbar-nav li {    position: relative  }  .navbar-nav li:not(:last-child):after {    content: '';    position: absolute;    right: 0px;    width: 1px;    height: 50%;    top: 20%;    background: white;  }  .dropdown-menu li:not(:last-child):after {    content: '';    position: absolute;    right: 0px;    width: 0px;    height: 50%;    top: 20%;    background: red;  }  @media (min-width: 768px) {    .navbar-nav > li {      float: none !important;      display: inline-block !important;    }    .navbar-nav {      float: none !important;    }  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">  <link href="css/custom.css" rel="stylesheet">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>        </head>    <body>      <nav role="navigation" class="navbar navbar-inverse">      <!-- start navigation button -->      <!-- brand , toggle grouped better mobile display -->      <div class="navbar-header">        <button type="button" data-target="#navbarcollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">toggle navigation</span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>          </button>            <a href="index.html" class="pull-left">          <img src="images/logonav1.png">        </a>        </div>      <!-- collection of nav links, forms, , other content toggling -->        <div id="navbarcollapse" class="collapse navbar-collapse">        <ul class="nav navbar-nav navbar-center">          <li class="#"><a href="#"><b><i>home</b></i></a>            </li>            <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"><b><i>collection </b></i><b class="caret"></b></a>              <ul role="menu" class="dropdown-menu">                        <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i><b><i>all collection portfolio</b></i></a>                    </li>              <li class="divider"></li>              <li><a href="#"><i class="fa fa-trash-o fa-fw"></i>collection 1</a>                </li>              <li><a href="collection2.html"><i class="fa fa-pencil-square-o fa-fw"></i>collection 2</a>                </li>              <li><a href="#"><i class="fa fa-paper-plane-o  fa-fw"></i>collection 3</a>                          </li>              <li class="divider"></li>              <li><a href="#"><i class="fa fa-trash-o fa-fw"></i>cita tenun indonesia</a>                </li>              </ul>          </li>            <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">things <b class="caret"></b></a>              <ul role="menu" class="dropdown-menu">              <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> inbox</a>                </li>              <li><a href="#"><i class="fa fa-pencil-square-o  fa-fw"></i> drafts</a>                </li>              <li><a href="#"><i class="fa fa-paper-plane-o  fa-fw"></i> sent items</a>                </li>              <li class="divider"></li>              <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> trash</a>                  <li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> profile</a>                    <ul class="dropdown-menu">                    <li><a href="#"><i class="fa fa-calendar-o fa-fw"></i> account</a>                      </li>                    <li><a href="#"><i class="fa fa-folder-open-o  fa-fw"></i> users</a>                      </li>                    <li><a href="#"><i class="fa fa-file-o fa-fw"></i> login</a>                      </li>                  </ul>                </li>              </li>            </ul>                <li><a href="#">about</a>                </li>            <li><a href="#">contact us</a>            </li>          </li>        </ul>          </ul>      </div>    </nav>    <!-- end navigation button-->            <!-- javascript -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>    </body>