So, this code is made to change the background color of "DIV 1 or 2", which is inside a DIV element, when "LINK 1 or 2" is clicked, which is also inside a table element. This uses pseudo-classes. But what I don't understand is that when LINK 1 or 2 is clicked, the DIV background does not change, and when the mouse hovers over the DIV, the background color change, but the background color does not extend all the way to the entire box / DIV element. Can anyone see what's wrong with this code? Thanks.

The code:

```
<!DOCTYPE html>
<html>
      <head>
            <title> My personal code </title>

            <meta charset="UTF-8">
            <meta name="author" content="ME">
            <meta name="keywords" content="HTML, CSS, JavaScript">
            <meta name="revised" content="20-10-2021">

            <link rel="icon" href="icon.png" type="image/gif">

            <style>
                  a.one:link {color:red;}
                  a.one:visited {color:blue;}
                  a.one:hover {color:#orange;}

                  a.two:link {color:red;}
                  a.two:visited {color:blue;}
                  a.two:hover {font-size:150%;}

                  a.three:link {color:red;}                  
                  a.three:visited {color:blue;}
                  a.three:hover {background-color:orange;}

                  a.four:link {color:red;}
                  a.four:visited {color:blue;}
                  a.four:hover {font-family:monospace;}

                  a.five:link {color:red;text-decoration:none;}
                  a.five:visited {color:blue;text-decoration:none;}
                  a.five:hover {text-decoration:underline;}

                       div {
                       width: 300px;
                       border: 15px solid black;
                       padding: 50px;
                       margin: 20px;
                       background-color: white;
                       }
                       tr {
                         display: block;
                       }
            </style>

     </head>
     <body>

<table>
<table style=" width: 500px; height=40px; border:1px solid black;background-color: white;">
     <tr>

           <td colspan="100" style=border-style:solid ; border-width:1px"><p>LINK 1</p> </td>/*click this

           <td colspan="100" style=border-style:solid ; border-width:1px"><p>LINK 2</p></td>
     </tr>      
</table>     
<br>

           <div>
           <p><b><a class="three" href=#>DIV 1 </a></p>     
           </div>

           <div>
           <p><b><a class="three" href=#>DIV 2 </a></p> 
           </div>    

     </body>
</html>

```