Situating two lists side by side - html

Question

Why don't these line up? I am using Bootstrap to make a tutoring website and I am trying to maximize the use of the grid system but I don't want to unecessarily write JavaScript functions to dynamically create the lists just yet... Is this an incorrect way to create two lists side by side? My previous solution had the lists one after the other but I think from a UX perspective they should both be immediately visible, but for some reason "Science" is a centimeter lower than "Mathematics" and I don't understand why.
<h2> MATHEMATICS </h2>
<div id = "math_div">
<ul style="width:10%; float:left;">
<li>K-5 Math</li>
<li>Middle School Math</li>
<li>Algebra</li>
<li>Plane Geometry</li>
<li>Algebra 2</li>
<li>Trigonometry</li>
<li>Solid & Analytical Geometry</li>
<li>Precalculus</li>
<li>Calculus</li>
<li> Advanced Specialties
<ul>
<li>Symbolic Logic</li>
<li>Finite Math</li>
<li>Linear & Matrix Algebra</li>
<li>Multivariable Calculus (Analysis)</li>
<li>Differential Equations</li>
<li>Linear Programming (Finance)</li>
</ul>
</li>
</ul>
</div>
<h2> SCIENCE </h2>
<div id = "science_div">
<ul style="width:10%; float:left;">
<li>Chemistry</li>
<li>Physics</li>
<li>General Physical Science</li>
<li> Advanced Specialties
<ul>
<li>Nuclear Physics & Chemistry</li>
<li>Radiochemistry</li>
<li>Radiation Science</li>
<li>Measurement Theory</li>
<li>Uncertainty Treatments</li>
</ul>
</li>
<li> Advanced Specialties
<ul>
<li>Symbolic Logic</li>
<li>Finite Math</li>
<li>Linear & Matrix Algebra</li>
<li>Multivariable Calculus (Analysis)</li>
<li>Differential Equations</li>
<li>Linear Programming (Finance)</li>
</ul>
</li>
</ul>
</div>

Answer 1

I'd say the issue is how the html is structured and the float:left that should probably be in the div instead of the ul (this is what is causing the second list to be a little bit below the other, because it is floating below the first title).
If you change the code a little, you get the expected behavior:
<div id="math_div" style="float:left;">
<h2> MATHEMATICS </h2>
<ul style="width:10%;">
<li>K-5 Math</li>
<li>Middle School Math</li>
<li>Algebra</li>
<li>Plane Geometry</li>
<li>Algebra 2</li>
<li>Trigonometry</li>
<li>Solid & Analytical Geometry</li>
<li>Precalculus</li>
<li>Calculus</li>
<li>Advanced Specialties
<ul>
<li>Symbolic Logic</li>
<li>Finite Math</li>
<li>Linear & Matrix Algebra</li>
<li>Multivariable Calculus (Analysis)</li>
<li>Differential Equations</li>
<li>Linear Programming (Finance)</li>
</ul>
</li>
</ul>
</div>
<div id="science_div" style="float:left;">
<h2> SCIENCE </h2>
<ul style="width:10%;">
<li>Chemistry</li>
<li>Physics</li>
<li>General Physical Science</li>
<li>Advanced Specialties
<ul>
<li>Nuclear Physics & Chemistry</li>
<li>Radiochemistry</li>
<li>Radiation Science</li>
<li>Measurement Theory</li>
<li>Uncertainty Treatments</li>
</ul>
</li>
<li>Advanced Specialties
<ul>
<li>Symbolic Logic</li>
<li>Finite Math</li>
<li>Linear & Matrix Algebra</li>
<li>Multivariable Calculus (Analysis)</li>
<li>Differential Equations</li>
<li>Linear Programming (Finance)</li>
</ul>
</li>
</ul>
</div>
As you can see in this Fiddle. I don't know if that works for you.