<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div> <nav id="colorNav"> <ul> <li class="green"> <a href="#" class="icon-home"></a> <ul> <li><a href="http://easy-code.ru/lesson/navigacionnoe-css3-menu">Back to the tutorial</a></li> <li><a href="#">Get help</a></li> <li><a href="http://easy-code.ru/preview/2012/10/navigacionnoe-css3-menu/navigacionnoe-css3-menu.zip">Download this example</a></li> </ul> </li> <li class="red"> <a href="#" class="icon-cogs"></a> <ul> <li><a href="#">Payment</a></li> <li><a href="#">Notifications</a></li> <li><a href="#">Privacy options</a></li> <li><a href="#">Account Settings</a></li> </ul> </li> <li class="blue"> <a href="#" class="icon-twitter"></a> <ul> <li><a href="#">Follow us on Twitter</a></li> <li><a href="#">Find us on Facebook</a></li> </ul> </li> <li class="yellow"> <a href="#" class="icon-beaker"></a> <ul> <li><a href="#">PHP tutorials</a></li> <li><a href="#">jQuery techniques</a></li> <li><a href="#">CSS articles</a></li> <li><a href="#">Everything else</a></li> </ul> </li> <li class="purple"> <a href="#" class="icon-envelope"></a> <ul> <li><a href="#">Contact us</a></li> </ul> </li> </ul> </nav>

#colorNav > ul{ width: 450px; /* Increase when adding more menu items */ margin: 0 auto; /* Выравнивание по середине */ }