JSFiddle - React, Tailwind, and code Playground

by Michael Baas

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<div class='container' style="background-color:RGB(0x80,0x80,0x80);">
			<nav class='navbar navbar-dyalog navbar-inner' style="background-color:RGB(0xA0,0xA0,0xA0);">
				<div class='navbar-header' style="background-color:RGB(0xB0,0xB0,0xB0);">
					<button aria-expanded='false' class='navbar-toggle collapsed' data-target='#bs-navbar-collapse-1' data-toggle='collapse' type='button'>
						<span class='sr-only'>Toggle navigation</span>
						<span class='icon-bar'></span>
						<span class='icon-bar'></span>
						<span class='icon-bar'></span>
					</button>
				</div>
				<div class='collapse navbar-collapse' id='bs-navbar-collapse-1' style="background-color:RGB(0xC0,0xC0,0xC0);">
					<ul class='nav navbar-nav nav-center'>
						<li>
							<a href='#'>A1</a>
						</li>
						<li>
							<a href='#'>A2</a>
						</li>
						<li>
							<a href='#'>A3</a>
						</li>
						<li class='dropdown'>
							<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>More</a>
							<ul class='dropdown-menu'>
								<li>
									<a href='#'>B4</a>
								</li>
								<li>
									<a href='#'>B5</a>
								</li>
								<li>
									<a href='#'>B6</a>
								</li>
								<li>
									<a href='#'>B7</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</nav>
		</div>
    Pls. enlarge this area to see how the menu is centered...at least on Chrome and Vivaldi...

CSS

.nav.nav-center {
    margin:0;
    float:none;
}

.navbar-inner{
    text-align:center;
}

body {
	padding:20px;
	font-family:Helvetica, Arial, sans-serif;
}
.container, .container-fluid {
	background:rgb(255,255,255);
	background:rgba(255,255,255,0.87);
	border-radius: 15px;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-moz-border-radius: 15px;
	border:1px #f78322 solid;
	padding-left:0px;
	padding-right:0px;
}
.page-header {
	padding-left:10px;
	padding-right:10px;
	margin:0px;
	height: 130px;
	border-bottom:1px #f78322 solid;

}

#DyalogLogo {
	position:relative;
	width:299px;
	float:left;
	top:28px;
}





.navwrapper {
	width:fit-content;
}
.navbar {
	border-radius:0px;
	background:rgb(237,127,0);
	background:rgba(237,127,0,0.7);
	margin-bottom:0px;
}


a {
	color:#000;
}

/* remove gutter spacing outside */
.row.no-gutter, .row-fluid.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

/* only remove padding of middle columns */
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child), 
.row-fluid.no-gutter [class*='col-']:not(:first-child),
.row-fluid.no-gutter [class*='col-']:not(:last-child) {
  padding-right:0;
  padding-left:0;
}


.navbar-dyalog .navbar-toggle .icon-bar {
	background-color:#9271bd;
}
.navbar-dyalog .navbar-toggle {
	border-color:#FFF;
}
.navbar-dyalog .nav .active a {
	background:rgb(247,131,34);
	background:rgba(247,131,34,0.7);
	padding:5px;
}

.navbar-dyalog .nav li a:hover {
	color: #000;
	background:rgb(247,131,34);
	background:rgba(247,131,34,0.7);
}
.spacer {
	height:20px;
	}

@media (max-width: 991px) {
	.leftborder {
		border-left:0px;
	}
	#details {
		display:block;
	}
	#TopText {
		display: none;
	}
}
@media (min-width: 992px) {
	#bs-navbar-collapse-1 {
		width:fit-content;
		margin: 0 auto;
	}
}