How to take off excess un-clickable region to the left of the navbar?


<body>

<style>
nav	{
	margin-top: -15px;
	}
nav {
	background-color: black;
	height: 50px;
	}
nav ul li {
	list-style-type: none;
	width: 150px; 
	float: left;
	border-right: 1px solid #CCC;
	text-align: center;
	}
nav ul li a { 
	text-decoration: none;
	color: white;
	line-height: 50px;
	display: block;
	}	
nav ul li a:hover {
	background-color: red;
	color: green;
	}	
	
#company ul li {
	text-align: right;
	color: green;
	line-height: 1.2;
	list-style-type: none;
	background-color: yellow;
	margin-right: 4px;
	margin-top: 0px;
		}
</style>

<div id="company">
	<ul>
		<li>Website: <a href="www.dashcamshd.com">WWW.WHATEVER.COM</a></li>
		<li>Telephone #: 1-800-867-5309</li>
		<li>Email: [email]whatever@gmail.com[/email]</li>
		<li>Business Hours: Monday-Friday 8:00am-5:00pm</li>
	</ul>
</div>

<nav>
<ul>
	<li><a href="#">HOME</a></li> 
	<li><a href="#">PRODUCTS</a></li> 
	<li><a href="#">ABOUT US</a></li> 
	<li><a href="#">CONTACT US</a></li> 
	<li><a href="#">FAQ</a></li>		
</ul>
</nav>

</body>

First, a request: When you post code, please put the code between [noparse]

 ... 

[/noparse] tags so it retains its formatting and we can copy and paste it to our PCs easily. Click the “#” at the right end of the message box to put them in your message.
Ideally, the code you post should be a “working page” (starts with doctype, ends with </html>) that demonstrates the probem. That way, you can be assured that we will see exactly what you see. For additional information about reporting problems or posting code, please click the link in the footer of my post and read our guidelines. Thanks.

About your issue:
Bad code :frowning: If one finds himself needing a little negative margin to “fix” some empty space, then one probably needs to do some homework. :slight_smile:

In this case, lists usually need to be “reset”. That means include ul {padding:0;margin:0}.

The following is a “working page”. Copy it into a new file and double-click it to open it in your browser. The space issue should be fixed. Please note that because the ul “reset” is NOT preceeded by a nav or div tag, it will target ALL uls.


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1230583-how-to-take-off-excess-un-clickable-region-to-the-left-of-the-navbar
2014.08.28 17:58
simplejunior
-->
    <style type="text/css">
nav {
    background-color: black;
    height: 50px;
}
ul {
    list-style-type:none;
    padding:0;
    margin:0;
}
nav ul li {
    width: 150px;
    float: left;
    border-right: 1px solid #CCC;
    text-align: center;
}
nav ul li a {
    text-decoration: none;
    color: white;
    line-height: 50px;
    display: block;
}
nav ul li a:hover {
    background-color: red;
    color: green;
}

#company ul li {
    text-align: right;
    color: green;
    line-height: 1.2;
    background-color: yellow;
}
    </style>
</head>
<body>

<div id="company">
    <ul>
        <li>Website: <a href="www.dashcamshd.com">WWW.WHATEVER.COM</a></li>
        <li>Telephone #: 1-800-867-5309</li>
        <li>Email: whatever@gmail.com</li>
        <li>Business Hours: Monday-Friday 8:00am-5:00pm</li>
    </ul>
</div>

<nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">PRODUCTS</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a href="#">CONTACT US</a></li>
        <li><a href="#">FAQ</a></li>
    </ul>
</nav>

</body>
</html>


Cheers

@ronpat

You’re request will be performed from here on out.

I’m still a newbie w/ html/css and looking to learn. I try to find answers on my own before hitting the forums because as a beginner all this is quite confusing.

Thank you for answering and fixing my dilemma.