JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container main-menu-div ">
<ul class="pull-right list-inline left-breadcrumbs">
<li> <a href="#">Contact Us </a></li>
<li> <a href="#">How we work </a></li>
<li> <a href="#">about our site review </a></li>
</ul>
<div class="col-sm-2 section-logo hidden-xs">
<div class="img-resposnsive">
<img src="http://placehold.it/193x55" alt="logo" class="img-responsive">
</div>
</div>
<div class="col-sm-5">
<ul class="nav nav-pills ">
<li><a href="">my menu part1</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Categories <span class="carot-down glyphicon glyphicon-chevron-down"></span>
</a>
<ul class="dropdown-menu category-dropdown-menu">
<div class="top-category-div">
<div class="container">
<div class="">
<ul class="list-inline top-cat-div ">
<li><h4 class="top-cat-heading">OUR CATEGORIES</h4></li>
<li class="pull-right"><h4>
<label for="" class="label label-primary more-top-site-text"><a href="">Show more <img src=" images/arrow-left-wt.png" class="arrow-left-wt" alt=">"></a> </label></h4>
</li>
</ul>
</div>
<div class="row">
<div class="col-sm-2">
<a...
CSS
.top-category-div{
background: black;
color: white;
margin-top: 0px;
margin-left: -66%;
padding-bottom: 54px;
}
@media (min-width: 1280px) {
.container{
width: 1280px;
padding-left: 0;
padding-left: 0px;
padding-right: 0px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
}