See the screenshot below:
Here is my css
and here is my html
What i want to achive is on the nav div, i want a margin to the very left and very right. How would i accomplish this?
Here is my css
Code:
/* CSS Document */
/*Layout Objects*/
body {
margin: 70px auto;
padding: 0;
background-color: #FFF;
}
#container {
margin: 0 auto;
width: 70%;
min-height: 600px;
height: 600px;
background-color:#FFF;
border:1px solid #000;
}
#banner {
margin: 2px;
height: 15%;
background-color: #FFF;
border:1px solid #000;
}
#menu {
margin: 2px;
height:5%;
background-color: #FFF;
border:1px solid #000;
}
#body {
margin: 2px;
height: 74%;
background-color: #FFF;
border:1px solid #000;
overflow: auto;
}
#footer {
margin: 2px;
height:3%;
background-color: #FFF;
border:1px solid #000;
}
/*End of Layout Objects*/
/*Start Of Navigation*/
#nav ul{
padding : 0;
padding : 5px;
margin : 0;
white-space : nowrap;
background-color: #0000FF;
}
#nav ul li{
display : inline;
}
#nav ul li a{
background-color : #0066CC;
color : White;
font-weight : bold;
text-decoration : none;
padding-left : 5%;
padding-right : 5%;
border:1px solid #000;
}
#nav ul li a:hover{
background-color : #99CCFF;
color : #000066;
}
/*End Of Navigation*/and here is my html
Code:
<body>
<div id="container">
<div id="banner"></div>
<div id="menu">
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Me</a></li>
<li><a href="">Professional Career</a></li>
<li><a href="">Contact Me</a></li>
</ul>
</div>
</div>
<div id="body"></div>
<div id="footer"></div>
</div>
</body>What i want to achive is on the nav div, i want a margin to the very left and very right. How would i accomplish this?
