Css: how to fix li's in one line - html

Question

My li's aren't in one line. How do I fix this?
I need to have 3 columns and on the same line.
How do I do this?
Thanks!
example
My HTML:
<main>
<header>
<nav>
<ul>
<li>Movies</li>
<li>Quote per category</li>
<li>Home</li>
</ul>
</nav>
<img src="assets/img/banner.png" alt="banner" title="banner">
</header>
<section>
<h1>Movie db search</h1>
<article>
<ul>
</ul>
</article>
</section>
<footer>
<p>&copy copyright Robin Hennebel. Data fetched from <a href="https://www.themoviedb.org/" title="themoviedb"
target="_blank">Tmdb</a> and Chucknorris.io</p>
</footer>
</main>
So you can see my li's where i put a picture and a paragraph via fetch.
I need them to be in one line in 3 columns.
My CSS:
article ul li {
display:inline-block;
width: 30%;
}
article li:nth-child(even){
background-color: #A0C0FF;
border-radius: 25px;
}
article li:nth-child(odd){
background-color: #F897CA;
border-radius: 25px;
margin-left: 1%;
}
figure img{
width: 35%;
display:block;
margin-left:auto;
margin-right: auto;
margin-top: 1%;
}
figcaption{
padding: 2%;
}
figure {
display: flex;
flex-direction: column;
align-items: center;
}
article{
display: flex;
flex-direction: column;
justify-content: space-between;
}
Does anyone has a solution?

Answer 1

METHOD 1: Use flexbox, that's the cleanest & most modern answer. You already use flex elsewhere, and you can make use of all of its magical powers...
ul {
display: flex;
flex-wrap: wrap;
}
ul li {
flex: 1 0 33.3%;
}
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Pears</li>
<li>Mangos</li>
<li>Peaches</li>
<li>Plums</li>
</ul>
However support for flexbox in older browsers is iffy. Test it in IE11, does it work?
METHOD 2: You can resort to a more classic way, using display:inline-block (fyi I use width: 30%, for some odd reason 33.3% results in two columns)...
ul li {
width: 30%;
display: inline-block;
}
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Pears</li>
<li>Mangos</li>
<li>Peaches</li>
<li>Plums</li>
</ul>
Method 3: Or using float: left, my personal favourite over the years, before becoming a flex addict ...
ul li {
width: 33.3%;
float: left;
}
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Pears</li>
<li>Mangos</li>
<li>Peaches</li>
<li>Plums</li>
</ul>

Answer 2

replace css code like this
your li in header nav
nav ul li {
display:inline-block;
width: 30%;
}
nav li:nth-child(even){
background-color: #A0C0FF;
border-radius: 25px;
}
nav li:nth-child(odd){
background-color: #F897CA;
border-radius: 25px;
margin-left: 1%;
}
https://jsfiddle.net/9twyyafs/