Unordered list Question


#1

Hello, I coded my own website. But I need some help with the unordered list part.

HTML CODE:

<!DOCTYPE html>
<html>
 <head>
  <title>HSP | Ranks</title>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
  <link rel="stylesheet" href="./css/style.css">
 </head>
 <body>


    <header>
      <div class="wrapper">
        <a href="index.html">
       <img class="logo" src="img/logohsp.png" alt="HSP HardendSteelPants LOGO">
       </a>
	   <a href="index.html">
	   <h1>Hardened <span class="highlight">Steel </span>Pants</h1>
	   </a>
       <nav>
         <ul>
           <li><a href="index.html">Home</a></li>
           <li><a href="join.html">Join</a></li>
           <li><a href="about.html">About us</a></li>
           <li class="current"><a href="ranks.html">Ranks</a></li>
           <li><a href="contact.html">Contact</a></li>
           <li><a href="donate.html">Donate</a></li>
         </ul>
       </nav>
     </div>
    </header>





       <div class="joinindex">
        <center>
    <H1>Ranks</H1>
    </center>
    </div>



    <section class="ranks">
<ul>
    <li><h3 class="achievableranks">Achievable Ranks:</h3></li>
    <li><h3 class="staffranks">Staff Ranks:</h3></li>
    <li><h3 class="buyableranks">Buyable Ranks:</h3></li>
</ul>
  <ul class="rank123">
    <li><p class="rank1">Recruit</p></li>
    <li><p class="rank2">Leader</p></li>
    <li><p>Donator</p></li>
 </ul>
  <ul class="rank123">
    <li><p class="rank3">Fighter</p></li>
    <li><p class="rank4">Co-Leader</p></li>

 </ul>
  <ul class="rank123">
    <li><p class="rank5">Knight</p></li>
    <li><p class="rank6">Administrator</p></li>

 </ul>
 <ul class="rank123">
   <li><p class="rank7">God</p></li>
   <li><p class="rank8">Moderator</p></li>

</ul>
<ul class="rank123">
  <li><p class="rank9">Titan</p></li>
  <li><p class="rank10">Helper</p></li>

</ul>
<ul class="rank123">
  <li><p class="rank11">Youtuber</p></li>
  <li><p class="rank12">Developer</p></li>

  <ul class="rank123">
    <li><p class="rank13">Streamer</p></li>
    <li><p class="rank14">Graphics Designer</p></li>

</ul>
    </section>


    <div class="noteranks">
      <P>NOTE! Asking for higher ranks will result a Permanent Ban!</P>
    </div>


<footer>
  <div class="wrapper">
    <nav>
     <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="join.html">Join</a></li>
      <li><a href="about.html">About us</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="donate.html">Donate</a></li>
    </ul>
   </nav>
  </div>
</footer>

 </body>
</html>

CSS CODE:

/* Ranks */

.ranks{
  background-color: #222;
  font-family: 'Righteous', cursive;
	font-size: 18px;
	font-weight: bold;
	color: #cccccc;
  text-align: center;
  padding-top: 25px;
}

section ul li{
    display: inline-block;
}


.achievableranks{
  text-align: left;
padding-right: 600px

}

.staffranks{
  text-align: center;
  padding-right: 600px;
}

/* RANK LIST*/

.rank1{
  text-align: left;
padding-right: 700px

}

.rank2{
  text-align: center;
  padding-right: 700px;
}

.rank3{
  text-align: left;
padding-right: 700px;
}

.rank4{
  text-align: left;
  padding-right: 700px;
}

.rank5{
  text-align: left;
padding-right: 700px

}

.rank6{
  text-align: center;
  padding-right: 700px;
}

.rank7{
  text-align: left;
padding-right: 700px

}

.rank8{
  text-align: center;
  padding-right: 700px;
}

.rank9{
  text-align: left;
padding-right: 700px

}

.rank10{
  text-align: center;
  padding-right: 700px;
}

.rank11{
  text-align: left;
padding-right: 700px

}

.rank12{
  text-align: center;
  padding-right: 700px;
}

.rank13{
  text-align: left;
padding-right: 700px

}

.rank14{
  text-align: center;
  padding-right: 700px;
}

/* NOTE */

.noteranks{
  background-color: #222;
  font-family: 'Righteous', cursive;
	font-size: 10px;
	font-weight: bold;
	color: #cccccc;
  text-align: center;
padding-top: 45px;
}

I want the ranks do be straight under each other now they look ugly.

I want it like this:

Achievable Ranks: Staff Ranks: Buyable Ranks:
Rank1 Rank1 Rank1
Rank2 Rank2 Rank2
Rank3 Rank3 Rank3
Rank4 Rank4 Rank4
Rank5 Rank5 Rank5

My website:Still work in progress!


#2

i would use grid or table to achieve this result, its designed for what you want to achieve.