Code Forum clone, not exactly. =).

[x_c_x]

Hi all. Just looking for some validation and tips on doing this better. I took a jab at it a few days ago as I like how the forum pages are designed and colors. This was off memory. First time I learned HTML, CSS and JS was back in 2011. Lol. As you'll see, I don't have all the elements in place as I couldn't remember how to style (place) them. I normally would have done this with float, the like. Perhaps I should be using flex/grid now? Appreciate the help! Thanks! =).

HTML:

<section>
    <a href="#">Front-End Development</a>
    <p>This section is for getting help with anything front-end related. This refers to
    anything that is visible to the user.</p>
   </section>     
   </div>
   <div id="panel2">
    <section>
    <a href="#">HTML & CSS</a>
    <p>All web development using HTML & CSS.</p>
    </section>       
  </div>
 
  CSS:
 
  #section1 {
    margin: 2px;
    padding: 5px 5px;
    width: 972.5px;
    background-color: black;
    border: 1px solid black;
    border-radius: 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: white;
    text-align: left;   
}

#section1 a {
    color: white;
    text-decoration: none;
}

#section1 a:hover {   
    text-decoration: underline;
}

#section2 {

    margin: 1px;
    padding: 15px 15px;
    width: 950px;
    background-color: rgb(156, 236, 212);
    border: 1px solid lightgray;
    border-left: 5px solid rgb(73, 199, 100);
    /*border-bottom: 1px solid lightgray;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
    color: gray;
    text-align: left;   
}

#section2 a {
    color: black;
    text-decoration: none;
}

#section2 a:hover {   
    text-decoration: underline;
}

#section3 {

    margin: 1px;
    padding: 15px 15px;
    width: 950px;
    background-color: rgb(156, 236, 212);
    border: 1px solid lightgray;
    border-left: 5px solid rgb(73, 199, 100);
    /*border-bottom: 1px solid lightgray;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
    color: gray;
    text-align: left;   
}

#section3 a {
    color: black;
    text-decoration: none;
}

#section3 a:hover {   
    text-decoration: underline;
}