title: Text overlaps when I style with css
body: <p>I'm building a resume page for my portfolio. I previously asked how to make an unordered list two columns and figured that out, thank you.</p>
  
  <p>But now when I add the next section, which is "Education" and list my degree, the text overlaps the last lines of the unordered list and I can't figure out why.</p>
  
  <p>Also, I set a div id named margin with a grooved border but it only surrounds part of the page. Its like it creates a box that is too small for the text.</p>
  
  <p>Forgive me if this is newbie stuff but after all, I <strong>am</strong> a newbie! Any help would be appreciated.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;link rel="stylesheet" href="mystyle.css"&gt;
          &lt;type="text/css"&gt;
  
          &lt;meta name="author" content="Michelle Lawson"&gt;
           &lt;!--   author: Michelle Lawson
                  CIS 116, Exit Portfolio, Summer 2013 --&gt;
  
         &lt;meta name="keywords" content="exit portfolio, Summer 2013, Edmonds Community College"&gt;
         &lt;meta name="description" content="exit portfolio"&gt;
         &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
         &lt;meta name="robots" content="NOINDEX, NOFOLLOW"&gt;
  
          &lt;title&gt;Resume&lt;/title&gt;
      &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="margin"&gt;
  
  
  &lt;header&gt;
      &lt;img src="../graphics/jpg/keys.jpg" alt="Code"&gt;
      &lt;div class="nameTitle"&gt;&lt;h3&gt;Michelle Lawson&lt;br&gt;
      Web Application Developer&lt;/h3&gt;&lt;/div&gt;
  &lt;/header&gt;
  
  &lt;nav&gt; 
              &lt;a href="template.html"&gt;Home&lt;/a&gt; |
              &lt;a href="resume.html"&gt;Resume&lt;/a&gt; |
              &lt;a href="interests.html"&gt;Interests&lt;/a&gt; |
              &lt;a href="coursework.html"&gt;Coursework&lt;/a&gt; |
              &lt;a href="../cases/cases.html"&gt;Cases&lt;/a&gt; |
  
  &lt;/nav&gt;          
  
  &lt;div id="pageTitle"&gt;&lt;h3&gt;Resume&lt;/h3&gt;&lt;/div&gt;
  
  
    &lt;h4&gt;Technical Expertise&lt;/h4&gt;                          
      &lt;div id="wrap"&gt;
          &lt;div class="left"&gt;  &lt;ul&gt;&lt;li&gt;HTML&lt;/li&gt;
                                  &lt;li&gt;XHTML&lt;/li&gt;
                                  &lt;li&gt;CSS&lt;/li&gt;
                                  &lt;li&gt;SQL&lt;/li&gt;
                                  &lt;li&gt;AD Administration&lt;/li&gt;
                                  &lt;li&gt;Lotus Notes Administration&lt;/li&gt;
                              &lt;/ul&gt;
          &lt;/div&gt;  
  
          &lt;div class="right"&gt;&lt;ul&gt;&lt;li&gt;XML&lt;/li&gt;
                              &lt;li&gt;JavaScript&lt;/li&gt;
                              &lt;li&gt;PHP&lt;/li&gt;
                              &lt;li&gt;SQL&lt;/li&gt;
                              &lt;li&gt;Networking&lt;/li&gt;
                              &lt;li&gt;End User Training&lt;/li&gt;
                              &lt;li&gt;SDLC&lt;/li&gt;
                          &lt;/ul&gt;
          &lt;/div&gt;  
      &lt;/div&gt;         
  &lt;br&gt;
  
  &lt;div id="edccdegree"&gt;&lt;h3&gt;Education&lt;/h3&gt;&lt;br&gt;
  Associate of Technical Arts, Web Application Development&lt;br&gt;
  &lt;/div&gt; 
  
  &lt;footer&gt;
  
              &lt;h4&gt;Contact Information:&lt;br&gt;
              Michelle Lawson&lt;br&gt;
              michelle.lawson00@gmail.com&lt;/h4&gt;
  &lt;/footer&gt;     
  &lt;/div&gt;       
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code> @charset "utf-8";
  /* CSS Document */
  .margin {
  margin-top:15px;
  margin-bottom:15px;
  margin-right:15px;
  margin-left:15px;
  padding:5px;
  border: groove #000000 20px;
  
          }
  
  /*p { font-family: "Book Antiqua"; font-size: 80%;}*/
  
  h1 { color:black; background-color: transparent; font-family: "Book Antiqua"; font-size:300%; }
  h2 { text-align:center; color: black; background-color: transparent; font-family:"Times New Roman", Times, serif; font-size:200%; }
  h3 { color: black; background-color: transparent; font-family: "Times New Roman", Times, serif; font-size:150%; }
  h4 { color: black; background-color: transparent; font-family: "Times New Roman", Times, serif; font-size:100%; }
  
  #wrap   {
      width:485px;
          }
  
  
  .left   {
      width:240px;
      /*background-color:*/
      height:123px;
      float:left;
          }
  
  .right {
  width:240px;
      /*background-color:#00d;*/
      height:123px;
      float:right;
  
          }
  
  .image {
      float:left;
          }
  
  //*.section {
      width:80%; 
      float:right;
          }
  */
  .nameTitle {  
      width:80%; 
      float:right;
              }
  
  
  .nav        {
  
      font-family:"Book Antiqua";
      font-size: 5em;
              }
  
  
  #edccDegree {
      font-weight:bold;
              }
  
  /*nav   {
              list-style-type:circle;
              width:125px;
              background-color: #abc;
              text-align: center;
              border-bottom: 2px solid black;
  }
  
  nav a {
              text-decoration: none;
              display:block;
  )
  
  nav a:hover {   background-color: brown
  
  
  
  
  /*.links { font-family: "Trebuchet MS"; color:olive; background-color: transparent; font-size: 80%; }
  
      blockquote strong { color: purple; background-color: transparent; } 
      .trip { color: navy; background-color: transparent; }
  
      #b1 {text-align:right; font-family: Trebuchet MS; font-size: 80%;}*/
  </code></pre>