Why is my CSS not being applied?

See more:

CSS

HTML

I've got a nav/menu bar that starts like this:

<nav>
    <ul class="top-level-menu">

Here is the CSS class:

.top-level-menu {
    list-style: none;
    padding: 0;
    margin-bottom: 12px;
    width: 100%;
    display:block;
    
}

However, the 100% width is not working, nor is the margin-bottom setting. There is no space whatsoever between the nav and the next element on the form (vertically); why isn't there 12px of "dead space"?

Also, when I programmatically replace the element below the nav/menu bar (an HTML Table) with a "placeholder" bit of HTML, rather than displaying *beneath* the menu, it displays to the right. Shouldn't the 100% width of the nav/menu prevent anything from being placed to its right?

For those with inquiring minds, here's the entire HTML of the nav/menu bar:

<nav>
  <ul class="top-level-menu">
    <li>Schedules
      <ul class="second-level-menu">
        <li id="mniOpenExisting" name="mniOpenExisting">Open Existing</li>
        <li>Create New...
          <ul class="third-level-menu">
            <li id="mniCreateNewScheduleBasedOnExisting" name="mniCreateNewScheduleBasedOnExisting">Based on Existing</li>
            <li id="mniCreateNewScheduleFromScratch" name="mniCreateNewScheduleFromScratch">From Scratch</li>
          </ul>
        </li>
        <li id="mniSaveCurrentSchedule" name="mniSaveCurrentSchedule">Save Current</li>
        <li id="mniEmailCurrentSchedule" name="mniEmailCurrentSchedule">Email Current</li>
        <li id="mniPrintCurrentSchedule" name="mniPrintCurrentSchedule">Print Current</li>
      </ul>
    </li>
    <li>Job/Locations
      <ul class="second-level-menu">
        <li id="mniAddNewJobLoc" name="mniAddNewJobLoc">Add New</li>
        <li id="mniViewOrEditJobLoc" name="mniViewOrEditJobLoc">View or Edit</li>
      </ul>
    </li>
    <li>Workers
      <ul class="second-level-menu">
        <li id="mniAddNewWorker" name="mniAddNewWorker">Add New</li>
        <li id="mniViewOrEditWorker" name="mniViewOrEditWorker">View or Edit</li>
        <li id="mniWorkerPreferences" name="mniWorkerPreferences">Preferences</li>
      </ul>
    </li>
    <li>Rules
      <ul class="second-level-menu">
        <li id="mniSetRules" name="mniSetRules">Establish/Maintain</li>
      </ul>
    </li>
    <li>Help
      <ul class="second-level-menu">
        <li id="mniAbout" name="mniAbout">About</li>
        <li id="mniHowTo" name="mniHowTo">How To...</li>
        <li id="mniContact" name="mniContact">Contact Us</li>
        <li id="mniAcquireLicense" name="mniAcquireLicense">Acquire License</li>
      </ul>
    </li>
  </ul>
</nav>

...and here's the element that I dynamically add, which ends up to the right of the nav/menu bar rather than below it:

<h2 class="floatleft">Open Existing Schedule</h2>

...and the class it uses:

.floatleft {
    float: left;
    display: block;
}

For the really curious, here is all the CSS:

html {
  font-family:'Segoe UI Light', 'Bookman Old Style', Calibri, Candara, serif;
}
header {
  background: #d2edf4;
  background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
  padding: 20px 15px 15px 15px;
  position: relative;
}
body {
  font-family: 'Palatino Linotype', 'Bookman Antigua', Palatino, serif;
  background-color: lightyellow;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  padding: 0;
  margin: 0;

  font-size: 14px;

  /* test - added 9/9/2015 */
  width:80%;
  margin-left:auto;
  margin-right:auto;
  /* end test - added 9/9/2015 */
}
nav {
    background-color: forestgreen;
}
form {
    background-color: lightyellow;
}
h1 {
  color: navy;
  font-family: "Segoe UI", serif;
  font-size: 2.5em;
  margin: 0;
  margin-bottom: 10px;
  display: inline-block;
  margin-right: 1em;
}
h2 {
  font-family: 'Bookman Old Style', Verdana, sans-serif;
}
table {
  width: 1200px;
  margin: 0 auto;
  background-color: azure;
  /*min-height: 100%;*/
  margin-top: 80px;
}
table, th, td {
    border: 1px solid navy;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    /*text-align: left;*/
}
input[type="time"] {
  margin: 3px;
}
p {
  font-size: 14px;
}
/* for aligning input texts that follow labels on forms and such; can create other sizes too (label120,etc.) */
.label88 {
    width: 88px;
    display: inline-block;
}
.hide {
  visibility: hidden;
  display: none;
}
.smallcaps {
    font-variant: small-caps;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  background: lightyellow;
}
.dateLabel {
  font-size: 16px;
  font-family: Candara, 'Segoe UI', sans-serif;
  color: forestgreen;
}
.shiftLabel {
  font-size: 13px;
  font-family: Calibri, serif;
  color: red;
}
.jobLoc {
  margin-right: 16px;
  width: 115px;
}
.jobLocCount {
  width: 40px;
}
.trabajar {
  width: 159px;
  margin-right: 16px;
  margin-top: 4px;
}
.shortTextInput {
    width: 64px;
}
.floatleft {
    float: left;
    display: block;
}
/* Menu-specific styles/rules, adapted from  */
.third-level-menu {
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.third-level-menu > li {
    height: 30px;
    background: gray;
}
.third-level-menu > li:hover {
    background: white;
}
.second-level-menu {
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.second-level-menu > li {
    position: relative;
    height: 30px;
    background: orange;
    color: white;
}
.second-level-menu > li:hover {
    background: green;
}
.top-level-menu {
    list-style: none;
    padding: 0;
    margin-bottom: 12px;
    width: 100%;
    display:block;
    /*border: 1px; <= not working*/
}
.top-level-menu > li {
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: moccasin;
}
.top-level-menu > li:hover {
    background: lightgray;
}
.top-level-menu li:hover > ul {
    /* On hover, display the next level's menu */
    display: inline;
}
/* End of Menu-specific Styles */