Q:

Why won't my columns line up correctly in HTML

Here is the JSFiddle that shows the problem.
The columns are both a width of 48% (because of the padding I have set). I used Inspect Element in Chrome to see the borders and they should both fit fine.
I attempted to float each column but for some reason it messed with the stylings. 
This is the particular section of code not lining up correctly:
<div id="main">
      <div id="leftColumn">
        <h1>Education</h1>
        <h3 class="small">The best preparation is a two-year associate degree in an applied science (AAS) program designed to prepare students for a career in chemical technology.
         College offers an associate of applied science for chemical technology. This degree requires completion of a minimum of 62 credit hours.
          College prepares students with skills necessary to go immediately into the workforce. </h3>
        <br>
        <h2 class="thick">Example of Classes for AAS in<br>
          Chemical Technology</h2>
        <table>
          <tr>
            <th>Course</th>
            <th>Class</th>
            <th>Credits</th>
          </tr>
          <tr>
            <td>BIO 101</td>
            <td>Cellular Biology</td>
            <td>4</td>
          </tr>
          <tr>
            <td>BIO 130</td>
            <td>Microbiology</td>
            <td>4</td>
          </tr>
          <tr>
            <td>CHM 120</td>
            <td>General Chemistry I</td>
            <td>4</td>
          </tr>
          <tr>
            <td>CHM 130</td>
            <td>General Chemistry II</td>
            <td>4</td>
          </tr>
          <tr>
            <td>CHM 220</td>
            <td>Organic Chemistry I</td>
            <td>5</td>
          </tr>
          <tr>
            <td>CHM 230</td>
            <td>Organic Chemistry II</td>
            <td>5</td>
          </tr>
          <tr>
            <td>CHM 250</td>
            <td>Chemical Instrumentation</td>
            <td>4</td>
          </tr>
          <tr>
            <td>ENG 110</td>
            <td>College Writing I</td>
            <td>3</td>
          </tr>
          <tr>
            <td>ENG 127</td>
            <td>Technical Writing</td>
            <td>3</td>
          </tr>
          <tr>
            <td>MATH 150</td>
            <td>College Algebra</td>
            <td>4</td>
          </tr>
          <tr>
            <td>MATH 152</td>
            <td>Trigonometry</td>
            <td>3</td>
          </tr>
          <tr>
            <td>MATH 220</td>
            <td>Probability and Statistics</td>
            <td>4</td>
          </tr>
          <tr>
            <td>PHY 100</td>
            <td>Fundamentals of Physics</td>
            <td>4</td>
          </tr>
          <tr>
            <td />
            <td>Wellness/Physical Education</td>
            <td>2</td>
          </tr>
          <tr>
            <td />
            <td>Program Elective Courses</td>
            <td>3</td>
          </tr>
          <tr>
            <td />
            <td>Political Science</td>
            <td>3</td>
          </tr>
          <tr>
            <td />
            <td>Social Science</td>
            <td>3</td>
          </tr>
        </table>
          <div class="tableFoot">
            <p class="grey italic">Minimum Total Credits: 62</p>
          </div>
      </div>
      <div id="rightColumn">
        <h1><span class="thin">Transfer</span> Programs</h1>
        <table>
          <tr>
            <th>Course</th>
            <th>Class</th>
            <th>Credits</th>
          </tr>
        </table>
      </div>
    </div>

And the CSS:
body {
  background-color: #00a6da;
  margin: 0;
  padding: 0;
}

/* Define font stylings */
.grey {
  color: grey;
}

.italic {
  font-style: italic;
}

.thick {
   font-weight:bold;
}

.thin {
 font-weight:normal;
}
/* Main stylings for the site sets margin, width, font, and background color */
#main {
  width:80%;
  margin-left:auto;
  margin-right:auto;
  font-family: Arial, Verdana, Hevetica, sans-serif;
  background-color: white;
  margin-top: 60px;
}

/* Define Styles for the Left and Right Columns */
h1 {
  margin-top: 70px;
  color: #00a6da;
  text-align: center;
  width: 80%;
}

#leftColumn {
  width: 48%;
  margin-left: 10px;
  display: inline-block;
}

#rightColumn {
  width: 48%;
  display: inline-block;
  margin-right: 10px;
}

/* Define style for table footer */
#leftColumn h3.small {
  font-size: 85%;
  width: 80%;
  padding: 5px;
}
.tableFoot {
  text-align: center;
  margin-left: 60px;
  width: 80%;
}
/* Define the styles for the Table in the Left Column */
table {
  width: 80%;
  border-collapse: collapse;
}

th, td {
  padding: 5px;
}
#leftColumn td:not(:last-child), #leftColumn th:not(:last-child) {
  text-align: left;
}

#leftColumn td:last-child {
  text-align: right;
  padding-right: 15px;
  width: 10%;
}

#leftColumn tr:not(:first-child):not(:last-child) {
  width: 25%;
}

#leftColumn tr:first-child {
  width: 10%;
}

#leftColumn tr {
  border-bottom: 2px solid black;
}

Also if you have any tips for the design of the website I'd be glad to here them. This is my first time working extensively with HTML, I took a semester of HTML3/4(one of the older ones) in High School.

A:

Add float:left; to #leftColumn and #rightColumn and add overflow: auto; to #main.
Overflow:auto works when you add it to the parent container because it does a clearfix on the container and prevents it from collapsing on itself when it's contents are using float. You can read more about it here: What methods of ‘clearfix’ can I use?

