jquery - yamm navbar bootstrap with flex -

i use yamm in bootstrap, need make flex each list have same spaces another, , if want add li in future wont mess space between them, every time use display:flex. wont affect anything. can guys help?

heres code

.yamm .nav,  .yamm .collapse,  .yamm .dropup,  .yamm .dropdown {    position: static;  }  .yamm .dropdown-menu {    left: auto;    top: 110% ;    -moz-box-shadow: none;    -webkit-box-shadow: none;    border: 1px solid #f1f1f1;    -webkit-border-radius: 0px;    -moz-border-radius: 0px;    border-radius: 0px;  }  .yamm .dropdown-menu .yamm-content {    padding: 20px 15px;  }  .yamm .dropdown-menu .yamm-content .links li {    padding: 8px 0px;  }  .yamm .dropdown-menu h2 {    font-size: 15px;    line-height: 27px;    color: #555;    text-transform: uppercase;    font-family: 'fjallaoneregular';    margin-top: 0px;  }  .yamm .dropdown-menu li {    line-height: 26px;    padding: 2px 0px;    -webkit-transition: 0.3s ease 0s;    -moz-transition: 0.3s ease 0s;    -o-transition: 0.3s ease 0s;    transition: 0.3s ease 0s;  }  .yamm .dropdown-menu li {    color: #3d3d3d;    line-height: 26px ;    text-transform: none ;    display: block;    padding: 8px 16px;  }  .yamm .dropdown-menu li a:hover,  .yamm .dropdown-menu li a:focus {    background: rgba(0, 0, 0, 0);    margin-left: 5px;  }  .yamm .dropdown-menu .text {    font-size: 13px;    line-height: 20px;    position: relative;    bottom: 0px;    top: 73px;  }  .yamm .dropdown.yamm-fw .dropdown-menu {    left: 0;    right: 0;  }   .header-nav .yamm .dropdown-menu {      background: #fff;    }  .yamm .dropdown-menu.pages {      padding: 10px 37px;    }  .yamm .dropdown-menu .title:hover,  .yamm .dropdown-menu .title:focus {    color: #12cca7;  }  .yamm .dropdown-menu li a:hover,  .yamm .dropdown-menu li a:focus {    color: #12cca7;  }  .yamm .dropdown-menu {    border-top-color: #12cca7;  }

<div class="header-nav animate-dropdown" style="background-color:#3498db">      <div class="container">          <div class="yamm navbar navbar-default" role="navigation">              <div class="navbar-header">                  <button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" 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="nav-bg-class">                  <div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse">  	<div class="nav-outer">  		<ul class="nav navbar-nav">  			<li class="active dropdown yamm-fw">  				<a href="home.html" data-hover="dropdown" class="dropdown-toggle" data-toggle="dropdown" onmouseover="this.style.color='#0f0'"     onmouseout="this.style.color='#fff'">home</a><!-- looping -->  				<ul class="dropdown-menu">  					<li>  						<div class="yamm-content">      <div class="row">          <div class="col-md-8 col-sm-8">              <div class="row">                  <div class='col-md-12'>                                       <div class="col-xs-12 col-sm-6 col-md-3">                          <h2 class="title">computer</h2>                          <ul class="links">                              <li><a href="#" >lenovo</a></li><!-- looping -->                              <li><a href="#" >microsoft </a></li>                              <li><a href="#" >fuhlen</a></li>                              <li><a href="#" >longsleeves</a></li>                          </ul>                      </div><!-- /.col -->                        <div class="col-xs-12 col-sm-6 col-md-3">                          <h2 class="title">camera</h2>                          <ul class="links">                              <li><a href="#" >fuhlen</a></li><!-- looping -->                              <li><a href="#" >lenovo</a></li>                              <li><a href="#" >microsoft </a></li>                                                 <li><a href="#" >longsleeves</a></li>                          </ul>                      </div><!-- /.col -->                        <div class="col-xs-12 col-sm-6 col-md-3">                          <h2 class="title">apple store</h2>                          <ul class="links">                              <li><a href="#" >longsleeves</a></li>                              <li><a href="#" >fuhlen</a></li>                              <li><a href="#" >lenovo</a></li>                              <li><a href="#" >microsoft </a></li>                                                                 </ul>                      </div><!-- /.col -->                        <div class="col-xs-12 col-sm-6 col-md-3">                          <h2 class="title">smart phone</h2>                          <ul class="links">                              <li><a href="#"      >microsoft </a></li> <!-- looping -->                              <li><a href="#">longsleeves</a></li>                              <li><a href="#">"fuhlen</a></li>                              <li><a href="#">lenovo</a></li>                                                               </ul>                      </div><!-- /.col -->                        </div>                                </div>          </div>          <div class="col-sm-4">          </div>      </div><!-- /.row -->               <!-- ============================================== wide products ============================================== -->              <!-- ============================================== wide products : end ============================================== -->     </div><!-- /.yamm-content -->					</li>  				</ul>  			</li>      			<li class="dropdown">  				  				<a href="category.html" onmouseover="this.style.color='#0f0'"     onmouseout="this.style.color='#fff'" >electronics <!-- looping -->  				   <span class="menu-label hot-menu hidden-xs">hot</span>  				</a>  			</li>  			<li class="dropdown hidden-sm">  				  				<a href="category.html" >television  				    <span class="menu-label new-menu hidden-xs">new</span>  				</a>  			</li>    			<li class="dropdown hidden-sm">  				<a href="category.html" >smart phone</a>  			</li>    			<li class="dropdown">  				<a href="contact.html" >contact</a>  			</li>  			  			  			  		</ul><!-- /.navbar-nav -->  		<div class="clearfix"></div>				  	</div><!-- /.nav-outer -->  </div><!-- /.navbar-collapse -->                  </div><!-- /.nav-bg-class -->          </div><!-- /.navbar-default -->      </div><!-- /.container-class -->    </div><!-- /.header-nav -->

to use flex, should add display: flex parent element.

you may ( have intentionally left css definition .col-xs-12 col-sm-6 col-md-3 empty, show there no special need define css rule flex child, until have specific style need ):

.col-md-12{    display: flex;    justify-content: space-between;  }  .col-xs-12 col-sm-6 col-md-3{    }

<div class='col-md-12'>   <div class="col-xs-12 col-sm-6 col-md-3">  		<h2 class="title">computer</h2>  		<ul class="links">  			<li><a href="#" >lenovo</a></li><!-- looping -->  			<li><a href="#" >microsoft </a></li>  			<li><a href="#" >fuhlen</a></li>  			<li><a href="#" >longsleeves</a></li>  		</ul>  	</div>  	<div class="col-xs-12 col-sm-6 col-md-3">  		<h2 class="title">camera</h2>  		<ul class="links">  			<li><a href="#" >fuhlen</a></li><!-- looping -->  			<li><a href="#" >lenovo</a></li>  			<li><a href="#" >microsoft </a></li>                     			<li><a href="#" >longsleeves</a></li>  		</ul>  	</div>  	<div class="col-xs-12 col-sm-6 col-md-3">  		<h2 class="title">apple store</h2>  		<ul class="links">  			<li><a href="#" >longsleeves</a></li>  			<li><a href="#" >fuhlen</a></li>  			<li><a href="#" >lenovo</a></li>  			<li><a href="#" >microsoft </a></li>                                         		</ul>  	</div>  	<div class="col-xs-12 col-sm-6 col-md-3">  		<h2 class="title">smart phone</h2>  		<ul class="links">  			<li><a href="#">microsoft </a></li> <!-- looping -->  			<li><a href="#">longsleeves</a></li>  			<li><a href="#">"fuhlen</a></li>  			<li><a href="#">lenovo</a></li>				   		</ul>  	</div>  </div>