html - CSS causing a blank gap in the right -

html - CSS causing a blank gap in the right -

this chunk of css code causing problem. http://www.asifslab.com unused space displayed can't find mistake. when take out code no space @ side when there there long gap right.

@import url(http://fonts.googleapis.com/css?family=oxygen+mono); /* starter css menu */ #cssmenu { padding: 0; margin: 0; border: 0; } #cssmenu ul, #cssmenu li { list-style: none; margin: 0; padding: 0; } #cssmenu ul { position: relative; z-index: 597; } #cssmenu ul li { float: left; min-height: 1px; vertical-align: middle; } #cssmenu ul li.hover, #cssmenu ul li:hover { position: relative; z-index: 599; cursor: default; } #cssmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } #cssmenu ul ul li { float: none; } #cssmenu ul ul ul { top: 0; left: auto; right: -99.5%; } #cssmenu ul li:hover > ul { visibility: visible; } #cssmenu ul ul { bottom: 0; left: 0; } #cssmenu ul ul { margin-top: 0; } #cssmenu ul ul li { font-weight: normal; } #cssmenu { display: block; line-height: 1em; text-decoration: none; } /* custom css styles */ #cssmenu { background: #333; border-bottom: 4px solid #ff3a34; font-family: 'oxygen mono', tahoma, arial, sans-serif; font-size: 12px; position: relative; margin-left: -8px; margin-right: -8px; z-index: 1000; } #cssmenu:after, #cssmenu ul:after { content: ''; display: block; clear: both; } #cssmenu ul { text-transform: uppercase; } #cssmenu ul ul { border-top: 4px solid #ff3a34; text-transform: none; min-width: 190px; } #cssmenu ul ul { background: #ff3a34; color: #fff; border: 1px solid #ff0901; border-top: 0 none; line-height: 150%; padding: 16px 20px; } #cssmenu ul ul ul { border-top: 0 none; } #cssmenu ul ul li { position: relative; } #cssmenu ul ul li:first-child > { border-top: 1px solid #ff0901; } #cssmenu ul ul li:hover > { background: #ff534d; } #cssmenu ul ul li:last-child > { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -moz-box-shadow: 0 1px 0 #ff3a34; -webkit-box-shadow: 0 1px 0 #ff3a34; box-shadow: 0 1px 0 #ff3a34; } #cssmenu ul ul li:last-child:hover > { -moz-border-radius: 0 0 0 3px; -webkit-border-radius: 0 0 0 3px; border-radius: 0 0 0 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #cssmenu ul ul li.has-sub > a:after { content: '+'; position: absolute; top: 50%; right: 15px; margin-top: -8px; } #cssmenu ul li:hover > a, #cssmenu ul li.active > { background: #ff3a34; color: #fff; } #cssmenu ul li.has-sub > a:after { content: '+'; margin-left: 5px; } #cssmenu ul li.last ul { left: auto; right: 0; } #cssmenu ul li.last ul ul { left: auto; right: 99.5%; } #cssmenu { background: #333; color: #cbcbcb; padding: 0 20px; } #cssmenu > ul > li > { line-height: 48px; }

just clarify htmled's answer, 2 quotes w3schools.com:

"visibility:hidden hides element, still take same space before. element hidden, still impact layout."

"display:none hides element, , not take space. element hidden, , page displayed if element not there."

link: http://www.w3schools.com/css/css_display_visibility.asp

html css