Formatting of navigation div - css

Question

I am trying to sort out my navigation div. I am having a whole variety of problems and I have been trying to sort them out for hours. I am a rookie programmer so please forgive me.
First here is a snap of my css
#navigation {
background: rgba(109, 183, 229, 1);
display: block;
position: static;
height: 40px;
width: 96%;
padding: 1% 2% 0% 2%;
clear: both;
border-style: solid;
border-color: #31679a;
border: 0% 0% 1% 0%;}
The border isn't behaving, because it is displaying it all the way around even though I clearly specify 0% for 3 sides. (SOLVED: changed to border-width, and changed % to px as border doesn't allow %)
Next I can't seem to center it perfectly in the middle. I've tried all sorts of things, but I can't seem to get it to function properly. (SOLVED: Magesh and Adam both provided good solutions to this problem, however Adam's achieved my desired results much easier)
I can't seem to get it to not be squeezed when resizing the window. This used to work, but after a couple of changes, it has stopped. I want it to disappear when the width is too small.
I feel like this will be a silly question, and the answer will be a small % here and there I have overlooked. But it is becoming very frustrating. (You may also notice the main body is overflowing over the border I've put at the bottom - no idea why). I will be extremely greatful for any help here.
EDIT: Sorry, I forgot to add. View it here: www.dweeman.com/eb/sitetemplate.html
EDIT: I've created this fiddle for you

Answer 1

NOTE: This answer is for your centering problem
HTML:
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Gallery</li>
</ul>
CSS
ul{
display:table;
width:100%; /*This ensures that the element covers the entire width*/
text-align:center; /*To center the text*/
list-style:none; /*Remove the bullets*/
margin:0; /*Remove margins*/
padding:0; /*Remove extra padding*/
}
ul li{
display:table-cell;
}
See here for example -> Click here
Warning : This is just for example, you could style this better.
Direct Solution: Replace this code with the code on your website,It'll work perfectly :)
#ddmenu {
display: table;
width: 100%;
text-align: center;
background: #31679a transparent;
border-radius: 0.125em;
cursor: pointer;
color: #8aa8bd;
}
#ddmenu li{
display: table-cell;
font-size: 1.20em;
text-shadow: 1px 1px 0 #fff;
border-right: 0px solid #dae0e5;
}
#ddmenu li a {
display: block;
padding: 0 0.750em;
line-height: 1.40em;
font-weight: bold;
text-decoration: none;
color: #31679a;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}

Answer 2

If you remove the width:100% from the #ddmenu and then put a text-align:center on #navigation that should centre the menu.
To make it stop scaling down at a certain width you can use a min-width
#navigation {
min-width:700px;
}
To make it completely disappear at a certain width you can use a media query in your css. Insert it at the end of your main css.
#media only screen and (max-width: 700px){
#navigation {
display:none;
}
}