Please help. My brain is fried from doing this first HTML and CSS project.
I've made a fixed horizontal menu at the top and an equally fixed footer. So that they stay on the stupid page no matter how small the browser window is.

But the main content keeps overlapping them both! I have absolutely no idea how to do that, and I will be eternally grateful to whoever can fix my stupid code, who works against me so much!

Please do a good deed and help a girl out.

```css
body { 
  background-color: #D1D0CE;
  font-family:      Helvetica, sans-serif;
  font-size:        small;
  margin:           0px;
}

#content {

    margin-left: auto;
    margin-right: auto; 
    min-width: 1020px; 
    min-height: 780px; 
}

/* partea de header */

header.top {
    background-color: #F0FFFF;
    margin:           0px 0px 0px 0px;
    height:           63px;
}

#headerLogo {
    position: fixed;
    top: 0px;
    left: 0px;
}

#title {
 position:      fixed;
    border:         none;
    top:            1px;
    left:           50%;
    font-family:    Helvetica, sans-serif;
    font-size:      150%;
    font-weight:    bold;
    color:          #488AC7;
}

/* meniul */

a:link {
    text-decoration:  none;
}

a:visited {
    text-decoration:  none;
}

.nav {
    background-color:  #488AC7;
 margin:            none;
    position:          fixed;
    width:             100%;
}

.nav ul {
 margin:            0px;
 list-style-type:   none;
 padding:           5px 0px 5px 0px;
}

.nav ul li {
 display:           inline;
 padding:           5px 10px 5px 10px;
}
.nav ul li a:link, .nav ul li a:visited {
 color:             #F0FFFF;
 border-bottom:     none;
 font-weight:       bold;
}

.nav ul li.selected {
    background-color:   #F0FFFF;
    border-bottom:      none; 
}

.nav ul li:hover {
    background-color:   #476e9e; 
}

.nav ul li.selected:hover {
    background-color:   #E5E4E2;
}

.nav ul li.selected a:link, .nav ul li.selected a:visited {
    color:              #488AC7;
} 

/* formularul */

form {
 display: table;
 padding: 5px;
    width: 100%;
}

div.tableRow {
 display: table-row;
}

div.tableRow p {
 display: table-cell;
 vertical-align: top;
    padding: 3px; 
}

form input {
height: 20px;

}

div.tableRow p:first-child {
 text-align: left;
    width: 180px;
}

/* tabelul vine aici */

caption {
    font-weight: bold;
    color: #488AC7;
    text-align: left;
    padding-left: 10px; 
    padding-top: 10px;
    padding-bottom: 5px;
}

table {
  margin-left:      10px;
  margin-right:     10px;
  margin-top:       10px; 
  border:           thin solid black;
  caption-side:     top;
  border-collapse:  collapse;
  width:            100%;
}

tr.tableHeader {
  background-color: gray;
  text-align: left;
}

.tableContent {
 background-color: #F0FFFF;   
}

td, th {
  border:           thin solid gray;
  padding:          5px;
}

/* partea de footer */

.footer {
    margin: 10px 10px 20px 10px; 
    padding-top: 10px;
    position: fixed;
    bottom: 0;
    right: 0;
    border-top: 1.3px solid #488AC7; 
}

.button {
 background-color:      #488AC7;
 border-radius:         3px;
 border:                1px solid #488AC7;
 display:               inline-block;
 cursor:                pointer;
 color:                 #ffffff;
 font-size:             14px;
 padding:               4px 25px;
 text-decoration:       none;
 text-shadow:           0px 1px 0px #283966;
}
.button:hover {
 background-color:      #476e9e;
}

.button:active {
 position:              relative;
 top:                   1px;
}
```

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tema HTML si CSS - saptamana I</title>
    <link type="text/css" rel="stylesheet" href="tema.css">
  </head>

  <body>

  <div id="content"> 

    <header class="top">
        <img id="headerLogo"
           src="images/header_logo.jpg" alt="Assert Banking On Cloud header logo image">
        <p id="title">Data Entry</p>
    </header>  

  <div class="mainContent"> 
    <div class="nav">
   <ul>
  <li class="selected"><a href="tema.html">Job Description Details</a></li>
  <li><a href="">Audit Trail</a></li>
  <li><a href="">Files</a></li>
   </ul>
 </div>

      <br>
      <br>

    <form action="p" method="post">    

    <div class="tableRow"> 
       <p> Basic function and Scope </p>
       <p> <input type="text" name="basic" value="" required></p>
    </div>

    <div class="tableRow"> 
        <p> Task and duties </p> 
        <p><input type="text" name="task" value="" required> </p>
    </div>

    <div class="tableRow"> 
        <p> Work contacts </p>
        <p> <input type="text" name="contacts" value="" required> </p>
    </div>

    <div class="tableRow"> 
       <p> Independence of operation</p>
       <p> <input type="text" name="independence" value="" required> </p>
    </div>

    <div class="tableRow"> 
       <p>
  Supervisory responsibility
    </p>
       <p>
            <input type="radio" name="suptype" value="supervision" checked> Supervision
            <input type="radio" name="suptype" value="direction"> Direction
           <input type="radio" name="suptype" value="none"> None
       </p>
    </div>

     <div class="tableRow"> 
         <p> </p>
         <p> <input type="text" name="textSupervisory" value="">
    </p>
    </div>

    <div class="tableRow"> 
       <p> Total number of subordinates </p>
       <p> <input type="text" name="subordinates" value="" readonly>
    </p>
    </div>

    <div class="tableRow"> 
        <p> Physical effort </p>
        <p> <input type="text" name="physical" value=""> 
    </p>
    </div>

   <div class="tableRow"> 
       <p> Work conditions </p>
       <p> <input type="text" name="conditions" value="">
    </p>
    </div> 

</form>

    <table>
      <caption>
        Minimum requirements
      </caption>
      <tr class="tableHeader">
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
        <th>Header 5</th>
      </tr>
      <tr class="tableContent">
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
        <td>Row 1 Cell 3</td>  
        <td>Row 1 Cell 4</td>
        <td>Row 1 Cell 5</td>
      </tr>
      <tr class="tableContent">
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
        <td>Row 2 Cell 3</td>  
        <td>Row 2 Cell 4</td>
        <td>Row 2 Cell 5</td>
      </tr>
      <tr class="tableContent">
        <td>Row 3 Cell 1</td>
        <td>Row 3 Cell 2</td>
        <td>Row 3 Cell 3</td>  
        <td>Row 3 Cell 4</td>
        <td>Row 3 Cell 5</td>
      </tr>
      <tr class="tableContent">
        <td>Row 4 Cell 1</td>
        <td>Row 4 Cell 2</td>
        <td>Row 4 Cell 3</td>  
        <td>Row 4 Cell 4</td>
        <td>Row 4 Cell 5</td>
      </tr>
      <tr class="tableContent">
        <td>Row 5 Cell 1</td>
        <td>Row 5 Cell 2</td>
        <td>Row 5 Cell 3</td>  
        <td>Row 5 Cell 4</td>
        <td>Row 5 Cell 5</td>
      </tr>
      <tr class="tableContent">
        <td>Row 6 Cell 1</td>
        <td>Row 6 Cell 2</td>
        <td>Row 6 Cell 3</td>  
        <td>Row 6 Cell 4</td>
        <td>Row 6 Cell 5</td>
      </tr>
    </table>      

  </div>

  <div class="footer">
        <a href="#" class="button">Save</a>
        <a href="#" class="button">Submit</a>
        <a href="#" class="button">Cancel</a>
    </div>

 </div>       

</body>
```