Center Brand inline with drop down menus.

Hi all,

I am trying to get the Brand section (MML logo and Home button) to centre and appear inline with the other drop downs.

Thanks in advance.

I have the following code:

<div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>

      <a class="navbar-brand" href="index.html">Home</a></div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="defaultNavbar1">

      <ul class="nav navbar-nav"> 

        <li class="dropdown"><a href="#" title="About Us" target="_self" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown">About Us<span class="caret"></span></a>

            <ul class="dropdown-menu">

              <li><a href="message_md.html" title="Message From The Managing Director" target="_self">Message From Tha Managing Director </a></li>

              <li><a href="about_mml.html" title="About MML" target="_self">About MML</a></li>

              <li><a href="mml_the_team.html" title="MML's Team" target="_self">The Team</a></li>

              <li><a href="experience.html" title="MML's Experience" target="_self">MML's Experience</a></li>

            </ul>

        </li>

<li class="dropdown"><a href="#" title="Services" target="_self" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown">Services<span class="caret"></span></a>

            <ul class="dropdown-menu">

              <li><a href="food-preparation.html" title="Food Preparation" target="_self">Food Preparation</a></li>

              <li><a href="camp_management.html" title="General Camp Management" target="_self">General Camp Management</a></li>

              <li><a href="laundry.html" title="Laundry" target="_self">Laundry</a></li>

              <li><a href="housekeeping.html" title="Housekeeping" target="_self">Housekeeping</a></li>

              <li><a href="janitorial_services.html" title="Janitorial Services" target="_self">Janitorial Services</a></li>

              <li><a href="gardening.html" title="Gardening" target="_self">Gardening</a></li>

              <li><a href="camp_maintenance.html" title="Camp Maintenance" target="_self">Camp Maintenance</a></li>

            </ul>

        </li>

    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Community<span class="caret"></span></a>

            <ul class="dropdown-menu">

              <li><a href="social_contributions.html" title="Social and Economic Contributions" target="_self">Social and Economic Contributions</a></li>

              <li><a href="preference_for_tanzanian_provider.html" title="Preference For Tanzanian and Local Providers" target="_self">Preference For Tanzanian and Local Providers</a></li>

  <li><a href="sustainable_development.html" title="Sustainable Development" target="_self">Sustainable Development</a></li>

            </ul>

          </li>

          <li class="dropdown"><a href="#" title="Client Assurance" target="_self" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown">Client Assurance<span class="caret"></span></a>

            <ul class="dropdown-menu">

              <li><a href="statement_of_policy.html" title="Statement Of Policy" target="_self">Statement Of Policy</a></li>

              <li><a href="food_safety_quality.html" title="Food Safety and Quality Assurance Policy" target="_self">Food Safety and Quality Assurance Policy</a></li>

              <li><a href="health_and_safety.html" title="Health, Safety and Environment Policy" target="_self">Health, Safety and Environment Policy</a></li>

            </ul>

          </li>

     </ul>

</div>

    <!-- /.navbar-collapse -->

  </div>

  <!-- /.container-fluid -->

</nav>

CSS:

.navbar-brand {

  background-repeat: no-repeat;

  background-image: url(../images/mml_logo.svg);

  padding-left: 210px;

  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-size: 18px;

}

.navbar-nav {

  float:none;

  margin:0 auto;

  display: block;

  text-align: center;

}

.navbar-nav>li {

  display: inline-block;

  float:none;

}