Vote I want the rectangular less wide - html

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>