JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <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><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      <div class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">HOME<span class="sr-only">(current)</span></a></li>
          <li><a href="ourcarefactor.html">OUR CARE FACTOR</a></li>
          <li><a href="facilities.html">FACILITIES</a></li>
          <li><a href="functions.html">FUNCTIONS</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

CSS

.navbar.navbar-default {
  background-color: #B3C5D7;
  background-attachment: fixed;
  position: fixed;
  width: 100%;
  border-radius: 0px;
  float: none;
  text-align: center;
}

.nav.navbar-nav {
  font-size: x-large;
  width: 100%;
  display: inline-block;
}

.navbar-header {
  float:none;
}

.navbar-nav li {
  display:inline-flex;
  float:none;
}