Menu sizing issues - html

Question

I have a issue with my mega menu sizing. The desktop menu has a hover drop-down mega menu. The mega menus are going to be both 5 column and four column. I cant get the menu to size properly around the columns. currently its set close to what I'd like for the 5 column menu, however there is some text wrapping and id rather have the menu size itself appropriately. The four column has too much white space. I've tried a few things like switching width for max width but that doesn't solve the problem. Id really like to make the mega menu more responsive.
Codepen:https://codepen.io/iamgonge/pen/QpOgZB
desktop nav css:
/* Main Nav syle */
nav {
position: relative;
}
ul.main-nav {
list-style-type: none;
padding: 0px;
font-size: 0px;
max-width: 1000px;
margin: 0 auto;
}
ul.main-nav h2 {
font-size: .9em;
font-weight: 300;
}
ul.main-nav > li {
display: inline-block;
padding: 0;
}
ul.main-nav > li > a {
display: block;
padding: 20px 15px;
position: relative;
color: #fff;
font-size: 15px;
font-weight: 400;
box-sizing: border-box;
}
ul.main-nav > li:hover {
background-color: #f9f9f9;
}
ul.main-nav > li:hover > a {
color: #333;
font-weight: 400;
}
ul.main-nav > li ul.sub-menu-lists {
margin: 0px;
padding: 1px;
list-style-type: none;
display: block;
}
ul.main-nav > li ul.sub-menu-lists > li {
padding: 0 0px;
margin-top: 2px;
}
ul.main-nav > li ul.sub-menu-lists > li > a {
font-size: 14px;
}
.sub-menu-head {
margin: 10px 0;
border-bottom: 1px solid #4F96BA;
width: 100%;
}
/*Media Queries*/
#media only screen and (max-width: 768px) {
#top-logo {
display: block;
max-width: 50%;
margin: 3px auto;
}
.collapse.in {
min-height: 150px;
background-color:#4F96BA;
verflow-y:visible;
}
.sub-menu-head {
color: #fff;
}
nav {
background-color: transparent;
}
ul.main-nav > li > a:after {
display: none;
}
ul.main-nav > li:first-child {
border-radius: 0px;
}
ul.main-nav > li {
display: block;
border-bottom: 1px solid #444;
}
ul.main-nav > li > a {
font-weight: 600;
}
ul.main-nav > li ul.sub-menu-lists > li a {
color: #4F96BA;
;
font-size: 14px;
}
.sub-menu-head {
font-size: 16px;
}
ul.main-nav > li:hover {
background-color: transparent;
}
ul.main-nav > li:hover > a {
text-decoration: none;
font-weight: 600;
}
.sub-menu-block {
padding: 0 30px;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #000;
}
#big {
display: none;
}
}
/*end query*/
#media only screen and (min-width: 769px) {
#top-logo, #searchie {
display: none;
}
ul.main-nav {
display: block;
position: relative;
}
.sub-menu-block {
padding: 15px;
}
/* Sub Menu */
ul.main-nav > li > div.sub-menu-block {
visibility: hidden;
background-color: #f9f9f9;
position: absolute;
margin-top: 0px;
width: 100%;
color: #333;
left: 0;
box-sizing: border-box;
z-index: 3;
font-size: 16px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
opacity: 0;
/*CSS animation applied for sub menu : Slide from Top */
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
}
ul.main-nav > li:hover > div.sub-menu-block {
background-color: #f9f9f9;
visibility: visible;
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
ul.main-nav > li > div.sub-menu-block > * {
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
opacity: 0;
}
ul.main-nav > li:hover > div.sub-menu-block > * {
opacity: 1;
}
.sub-menu-head {
font-size: 20px;
}
/* List Separator: Outer Border */
header.dark ul.main-nav > li > a {
border-right: 1px solid #bbb;
}
header.mega ul.main-nav > li > a {
border-right: 1px solid #666;
}
/* List Separator: Inner Border */
ul.main-nav > li > a:after {
content: '';
width: 1px;
height: 62px;
position: absolute;
right: 0px;
top: 0px;
z-index: 2;
}
header.dark ul.main-nav > li > a:after {
background-color: #777;
}
header.mega ul.main-nav > li > a:after {
background-color: #999;
}
/* Drop Down/Up Arrow for Mega Menu */
ul.main-nav > li > a.mega-menu > span {
display: block;
vertical-align: middle;
}
ul.main-nav > li > a.mega-menu > span:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: '';
background-color: transparent;
display: inline-block;
margin-left: 10px;
vertical-align: middle;
}
ul.main-nav > li:hover > a.mega-menu span:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 0px solid transparent;
border-bottom: 5px solid #666;
}
.banners-area {
border-top: 1px solid #ccc;
}
#little {
display: none;
}
}
/*end query*/
/**************Additions****************/
/* 5 Columns */
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-15 {
width: 20%;
float: left;
}
#media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
html:
<div id="big">
<div class="navbar navbar-default navbar-static-top navbar-main affix-top" data-spy="affix" data-offset-top="50" role="navigation" >
<div class="dark">
<ul class="main-nav">
<li class="top-level-link">
<a class="mega-menu"><span>SOFTWARE</span></a>
<div class="sub-menu-block" id="five-block">
<div class="row">
<div class="col-md-15 col-sm-6">
<h2 class="sub-menu-head">Microsoft Office</h2>
<ul class="sub-menu-lists">
<li class="hover_drop_down">
Microsoft Office 2016<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Office 2016 Home & Business</li>
</ul>
</li>
<li>Microsoft Office 365 </li>
</ul>
</div>
<div class="col-md-15 col-sm-6">
<h2 class="sub-menu-head">Windows</h2>
<ul class="sub-menu-lists">
<li><a>Microsoft Windows 10 Pro</a></li>
</ul>
</div>
<div class="col-md-15 col-sm-6">
<h2 class="sub-menu-head">SQL Server</h2>
<ul class="sub-menu-lists">
<li><a>Microsoft SQL Server 2016<span class="caret"></span></a></li>
</ul>
</div>
<div class="col-md-15 col-sm-6">
<h2 class="sub-menu-head">Windows Server</h2>
<ul class="sub-menu-lists">
<li><a>Windows Server 2003 R2<span class="caret"></span></a></li>
</ul>
</div>
<div class="col-md-15 col-sm-6">
<h2 class="sub-menu-head">Remote Desktop Services</h2>
<ul class="sub-menu-lists">
<li><a>Remote Desktop Services 2016<span class="caret"></span></a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="top-level-link">
<a class="mega-menu"><span>ELECTRONICS</span></a>
<div class="sub-menu-block">
<div class="row ">
<div class="col-md-3 col-sm-6" >
<h2 class="sub-menu-head">Software Resources</h2>
<ul class="sub-menu-lists" >
<li><a>Software Resources</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6" >
<h2 class="sub-menu-head">Software Resources</h2>
<ul class="sub-menu-lists" >
<li><a>Software Resources</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6" >
<h2 class="sub-menu-head">Software Resources</h2>
<ul class="sub-menu-lists" >
<li><a>Software Resources</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6" >
<h2 class="sub-menu-head">Software Resources</h2>
<ul class="sub-menu-lists" >
<li><a>Software Resources</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--Desktop end-->

Answer 1

Can't you just remove the width:100% from the div.sub-menu-block element to remove the extra white-space from the 4-column menu?

Answer 2

Well you can use
white-space:nowrap;
For keeping the names in 1 line take a look here
CSS W3shcool attributes