CSS not filling entire width

Question

I have a navigation tab which is only taking up half of the width which I require, I need it to take up 100% width however it does not. I have looked at around this site and google could not get it working like I want it. IThe navigation ie the black background should take up 100% of the width however it does not. any ideas.

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
}
nav ul {
	background: #1e1d1d; 
	background: linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #1e1d1d 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}
nav ul li {
	float: left;
}
	nav ul li:hover {
		background: #f7f7f7;
		background: linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #f7f7f7 0%,#5f6975 40%);
	}
		nav ul li:hover a {
			color: #ff0000;
		}
	
	nav ul li a {
		display: block; padding: 25px 40px;
		color: #f7f7f7; text-decoration: none;
	}
nav ul ul {
	background: #f7f7f7; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
		}	
			nav ul ul li a:hover {
				background: #888484;
        color: #ff0000;
			}
nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

<nav>
	<ul>
		<li><a href="#">Basin &amp; Sinks</a></li>
		<li><a href="#">Showers</a>
			<ul>
				<li><a href="#">Shower Trays</a></li>
				<li><a href="#">Shower Glass</a>
					<ul>
						<li><a href="#">Frosted</a></li>
						<li><a href="#">Clear</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Bathroom Accessories</a>
			<ul>
				<li><a href="#">Plugs</a></li>
				<li><a href="#">Toilet Paper</a></li>
			</ul>
		</li>
		<li><a href="#">Toilets</a></li>
	</ul>
	</nav>

https://jsfiddle.net/1nzot5rq/1/

have tried several links and have tried width: 100%, max-width: 100%; however I have had no luck.

Answer 1

If you're looking on Chrome, Chrome adds 40px of padding as follows to <ul>'s:

-webkit-padding-start: 40px;

This is making the <ul> extend over the width you define.

There's 2 ways of overcoming this:

1. Remove all padding, including browser defaults

https://jsfiddle.net/pzod450b/1/

Simply add -webkit-padding-start: 0. On top of that, you've also added 20px of padding either side of the <ul>, remove this

CSS:

nav ul {
    background: #1e1d1d; 
    background: linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #1e1d1d 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
  width: 100%;
}

2. Use box-sizing: border-box

Using this method will ensure that the browser calculates all padding/border applied to an element within it's final width:

https://jsfiddle.net/u1vzag3b/

nav ul {
    background: #1e1d1d; 
    background: linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #1e1d1d 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
  width: 100%;
  box-sizing: border-box;
}

You'll notice in both cases, you should add width: 100% to nav ul.

Answer 2

Add:

  nav ul {
   width: 100%;
   display:block;
  }

But even with that you will have problem managing you columns to fit all width. You can use JS to calculate each width or use display: table for nav ul and display: table-cell for you ul li's

Answer 3

Just add width: 100%; box-sizing: border-box; to nav ul like this: https://jsfiddle.net/d8ch5qer/

nav ul ul {
  display: none;
}

nav ul li:hover > ul {
  display: block;
}

nav ul {
  background: #1e1d1d;
  background: linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
  background: -moz-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
  background: -webkit-linear-gradient(top, #1e1d1d 0%, #bbbbbb 100%);
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
  padding: 0 20px;
  border-radius: 10px;
  list-style: none;
  position: relative;
  display: inline-table;
  width: 100%;
  box-sizing: border-box;
}

nav ul:after {
  content: "";
  clear: both;
  display: block;
}

nav ul li {
  float: left;
}

nav ul li:hover {
  background: #f7f7f7;
  background: linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
  background: -moz-linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
  background: -webkit-linear-gradient(top, #f7f7f7 0%, #5f6975 40%);
}

nav ul li:hover a {
  color: #ff0000;
}

nav ul li a {
  display: block;
  padding: 25px 40px;
  color: #f7f7f7;
  text-decoration: none;
}

nav ul ul {
  background: #f7f7f7;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
}

nav ul ul li {
  float: none;
  position: relative;
}

nav ul ul li a {
  padding: 15px 40px;
}

nav ul ul li a:hover {
  background: #888484;
  color: #ff0000;
}

nav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

<nav>
  <ul>
    <li><a href="#">Basin &amp; Sinks</a></li>
    <li><a href="#">Showers</a>
      <ul>
        <li><a href="#">Shower Trays</a></li>
        <li><a href="#">Shower Glass</a>
          <ul>
            <li><a href="#">Frosted</a></li>
            <li><a href="#">Clear</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Bathroom Accessories</a>
      <ul>
        <li><a href="#">Plugs</a></li>
        <li><a href="#">Toilet Paper</a></li>
      </ul>
    </li>
    <li><a href="#">Toilets</a></li>
  </ul>
</nav>