Table margin is weird - html

Question

I would like to give the table a margin, that the table is not 100% of the #content div. But the table is bigger than the div(outside).
Here is my fiddle: jsfiddle
HTML code:
</form>
<table>
<tr>
<th>Jobart</th>
<th>Stadteil</th>
<th>Berufsfeld</th>
<th>Title</th>
<th>Vergütung</th>
<th>Gesucht zum(Datum)</th>
<th>Weitere Informationen</th>
</tr>
<tr>
<td>Gelegenheitsjob</td>
<td>Charlottenburg</td>
<td>Bau, Architektur, Vermessung</td>
<td>kl</td>
<td></td>
<td>0000-00-00</td>
<td>Weiter</td>
</tr>
<tr>
<td>Gelegenheitsjob</td>
<td>Charlottenburg</td>
<td>Bau, Architektur, Vermessung</td>
<td>kljlk</td>
<td>78678</td>
<td>2014-12-01</td>
<td>Weiter</td>
</tr>
<tr>
<td>Ausbildungsplatz</td>
<td>Lichtenberg</td>
<td>Gesundheit</td>
<td>kökölkölk</td>
<td>321321</td>
<td>2014-12-23</td>
<td>Weiter</td>
</tr>
<tr>
<td>Praktika</td>
<td>Tempelhof</td>
<td>Technik, Technologiefelder</td>
<td>hallo</td>
<td>1337€</td>
<td>2014-12-25</td>
<td>Weiter</td>
</tr>
<tr>
<td>Praktika</td>
<td>Reinickendorf</td>
<td>Medien</td>
<td>jljlkjljkl</td>
<td>7987987</td>
<td>2014-12-28</td>
<td>Weiter</td>
</tr>
</table>
CSS code:
* {
margin: 0;
padding: 0;
}
body {
background-color: gray;
width: 100%;
}
#header {
background-color: blue;
height: 250px;
width: 100%;
}
nav {
width: 100%;
height: 50px;
background-color: yellow;
}
nav ul {
margin: 0;
}
nav ul li {
list-style: none;
float: left;
display: block;
margin: 8px 0 0 50px;
}
nav a:link {
text-decoration: none;
color: #696969;
font-family: 'Oswald', sans-serif;
font-size: 22px;
}
nav a:visited {
color: #696969;
}
nav a:hover {
color: black;
}
nav a:active {
color: black;
}
#content {
clear: left;
background-color: white;
width: 100%;
height: 100%;
}
form {
padding: 30px;
}
table {
width: 100%;
margin: 30px;
border-collapse: collapse;
/*border-spacing: 8px;*/
}
table tr:nth-of-type(odd) td {
background-color: gray;
}
th {
background-color: #8dc043;
height: 50px;
border: 1px solid #578415;
}
tr {
border: 1px solid #578415;
}
td {
border: 1px solid #578415;
padding: 8px;
}
fieldset {
padding: 15px;
}
footer {
border: 1px solid red;
background-color: green;
height: 50px;
}
footer ul {
margin: 15px 0 0 0;
}
footer ul li {
list-style: none;
float: left;
display: block;
margin: 0 0 0 50px;
}
#wrapper {
margin: 0 auto;
width: 85%;
}
Hope, that somebody can help me!

Answer 1

The problem is that in your example the padding: 30px of your table is added to width: 100% which results in more than 100% of total width;
Example 1: Using percentages on table
HTML
<table>
...
</table>
CSS
table {
margin: 3%;
width: 94%;
}
Example 2 Using wrapper around table for pixelvalues
HTML
<div class="tablemargin">
<table>
...
</table>
</div>
CSS
.tablemargin {
margin: 30px; /*sets margin around the table*/
}
table {
width: 100%;
margin: 0; /*set margin to 0 or remove this property completely*/
}

Answer 2

You can use pixel size as well as percentages. 50px is 50 pixels. It would be like this:
nav {
width: 100px;
height: 50px;
background-color: yellow;
}