Vote I want the rectangular less wide

Question

Please check the below link to check the code in HTML and CSS and check the result. Please, I need the rectangular in the result to be less wide.

https://jsfiddle.net/Ahmed_abdelmeguid/6L8vbutw/5/ [enter image description here][1]

this is CSS code

.tictac_3 > ul {
    width: 50%;
    height: 20px;
    display: flex;
    flex-wrap: wrap;}
  
  .tictac_3 > li  {
    width: 30%;
    height: 30px;
     font-size: 30px;
    font-family: sans-serif;
    background-color:lightblue;
    margin: 5px;
    list-style: none;
    text-align: center;
   float: left;
  }

and below the HTML code

<ul class="tictac_3"> 
                                        <li class=".tictac_3">X
                                        <li class=".tictac_3">
                                        <li class=".tictac_3">O
                                
                                        <li class=".tictac_3">
                                        <li class=".tictac_3">X
                                        <li class=".tictac_3">O
                                
                                        <li class=".tictac_3">X
                                        <li class=".tictac_3">O
                                        <li class=".tictac_3">
                                        </ul>    

you can check the code and the result that I want to modify it in the below link That I provided it in the start of my question https://jsfiddle.net/Ahmed_abdelmeguid/6L8vbutw/5/

Answer 1

Problems

"Please, I need the rectangular in the result to be less wide"

OK, there are some problems with OP code that are at fundamental level:

• Every <li> end tag </li> is missing

• The selector: .tictac_3 > ul does not exist

• height: 20px is assigned to the previously mentioned selector. If it referenced the <ul> as was intended, it would make very little sense since all of it's <li> are height: 30px

Changes

• All of the classes on the <li> is removed, a single class on the <ul> is sufficient.

• Added max-width: 12rem; to the <ul>

Each <li>

• Changed height from an absolute value 30px to a relative value 2rem.

• Changed font-size exactly as height was changed.

• Decreased the margin from 5px to 1px

• Added a little padding-bottom: 0.25em

.tictac {
  display: flex;
  flex-flow: row wrap;
  width: 50%;
  max-width: 12rem;
  list-style: none;
}

.tictac li {
  width: 30%;
  height: 2rem;
  font-size: 2rem;
  font-family: sans-serif;
  text-align: center;
  margin: 1px;
  padding-bottom: 0.1em;
  background-color: lightblue;
}

<ul class="tictac">
  <li>X</li>
  <li></li>
  <li>O</li>

  <li></li>
  <li>X</li>
  <li>O</li>

  <li>X</li>
  <li>O</li>
  <li></li>
</ul>