Trying to make 4 vertical columns in CSS

HTML-CSS
1

website tables to CSS

Trying to convert from tables to CSS to make a responsive website.
This should be 4 vertical colums, instead it is 1 verticle column.
Where did I go wrong ??
Thank You
falcon

 <style type="text/css">
  .lfcol { float:left;width:19.8%;margin-bottom:5px; }
  .micol { float:left;width:19.8%;margin-bottom:5px; }
  .rmicol { float:right;width:19.8%;margin-bottom:5px; }
  .ricol { float:right;width:19.8%;margin-bottom:5px; }</style>  
 
  <h2 class="clear">Old Testament</h2>
  <!-- left column -->
  <dl class=".lfcol"><font size="+2">
  <dt>&nbsp;<b>&nbsp;1 <a href="01_001.htm">Genesis</a></dt>
  <dt>&nbsp;<b>&nbsp;2 <a href="02_001.htm">Exodus</a></dt>
  <dt>&nbsp;<b>&nbsp;3 <a href="03_001.htm">Leviticus</a></dt>
  <dt>&nbsp;<b>&nbsp;4 <a href="04_001.htm">Numbers</a></dt>
  <dt>&nbsp;<b>&nbsp;5 <a href="05_001.htm">Deuteronomy</a></dt>
  <dt>&nbsp;<b>&nbsp;6 <a href="06_001.htm">Joshua</a></dt></dl>
  <!-- middle column -->
  <dl class=".micol">
  <dt>&nbsp;&nbsp;&nbsp;<b>7 <a href="07_001.htm">Judges</a></dt>
  <dt>&nbsp;&nbsp;&nbsp;<b>8 <a href="08_001.htm">Ruth</a></dt>
  <dt>&nbsp;&nbsp;&nbsp;<b>9 <a href="09_001.htm">1 Samuel</a></dt>
  <dt>&nbsp;<b>10 <a href="10_001.htm">2 Samuel</a></dt>
  <dt>&nbsp;<b>11 <a href="11_001.htm">1 Kings</a></dt>
  <dt> &nbsp;<b>12 <a href="12_001.htm">2 Kings</a></dt></dl>
  <!-- right middle column -->
    <dl class=".rmicol">
  <dt>&nbsp;<b>13 <a href="13_001.htm">1 Chronicles</a></dt>
  <dt>&nbsp;<b>14 <a href="14_001.htm">2 Chronicles</a></dt>
  <dt>&nbsp;<b>15 <a href="15_001.htm">Ezra</a></dt>
  <dt>&nbsp;<b>16 <a href="16_001.htm">Nehemiah</a></dt>
  <dt>&nbsp;<b>17 <a href="17_001.htm">Esther</a></dt>
  <dt>&nbsp;<b>18 <a href="18_001.htm">Job</a></dt></dl>
  <!-- right column -->
  <dl class=".ricol">
  <dt>&nbsp;<b>19 <a href="19_001.htm">Psalms</a></dt>
  <dt>&nbsp;<b>20 <a href="20_001.htm">Proverbs</a></dt>
  <dt>&nbsp;<b>21 <a href="21_001.htm">Ecclesiastes</a></dt>
  <dt>&nbsp;<b>22 <a href="22_001.htm">Song of Solomon</a></dt>
  <dt>&nbsp;<b>23 <a href="23_001.htm">Isaiah</a></dt>
  <dt>&nbsp;<b>24 <a href="24_001.htm">Jeremiah</a></dt></dl>
2

You do not need to put a dot here

class=".lfcol"

It should be

class="lfcol"

And you can use

display: flex;
flex-direction: row;
3

Thank You ! it worked
falcon