Limit div width and center - css

Question

I'm writing a tag cloud. When displayed on a phone, it displays the full width and looks fine. But on a desktop, it also displays the full width and doesn't look as I want. I would like to limit the width of the div on a desktop to some part of the total width, say 60%. But as you can see in my jsfiddle, when the display is widened, the text becomes one long-line. I've tried applying various suggestions I've found here, like max-width, but none seem to make a difference. Can someone please point out how to do this? Here's my code:
<style>
#container {
width:100%;
text-align:center;
}
.cloud {
display:inline;
list-style-type:none;
max-width:50%;
width:100%;
}
.cloud li {
list-style: none;
display: inline;
}
#tagcloud .smallest { font-size:.8em; font-weight:400; }
#tagcloud .small { font-size:.9em; font-weight:500; }
#tagcloud .medium { font-size:1em; font-weight:600; }
#tagcloud .large { font-size:1.3em; font-weight:700; }
#tagcloud .largest { font-size:1.6em; font-weight:800; }
</style>
<div id="container">
<ul class="cloud" id="tagcloud">
<li class="small">performance testing</li>
<li class="largest">stress testing</li>
<li class="large">conformance testing</li>
<li class="medium">acceptane testing</li>
<li class="small">smoke testing</li>
<li class="smallest">smoke testing</li>
<li class="small">performance testing</li>
<li class="largest">stress testing</li>
<li class="large">conformance testing</li>
<li class="medium">acceptane testing</li>
<li class="small">smoke testing</li>
<li class="smallest">smoke testing</li>
</ul>
</div>

Answer 1

You have to use media queries to control the width in certain screen sizes. Note that I used 4 media queries, which are the common breakpoints for various screen sizes (commonly used by Bootstrap 4); for the smallest screen size (<576px width), the CSS style is set outside the media queries.
Also note that I have changed the display of container from inline to inline-block, to give width attribute to the element.
#container {
width: 100%;
text-align: center;
}
.cloud {
display: inline-block;
list-style-type: none;
width: 90%;
}
.cloud li {
list-style: none;
display: inline;
}
#tagcloud .smallest {
font-size: .8em;
font-weight: 400;
}
#tagcloud .small {
font-size: .9em;
font-weight: 500;
}
#tagcloud .medium {
font-size: 1em;
font-weight: 600;
}
#tagcloud .large {
font-size: 1.3em;
font-weight: 700;
}
#tagcloud .largest {
font-size: 1.6em;
font-weight: 800;
}
/* ---------------------------------------------
Media Queries
--------------------------------------------- */
/* SM Small devices */
#media(min-width: 576px) {
.cloud {
width: 80%;
margin: auto;
}
}
/* MD Tablets */
#media (min-width: 768px) {
.cloud {
width: 70%;
margin: auto;
}
}
/* LG Desktop */
#media (min-width: 992px) {
.cloud {
width: 60%;
margin: auto;
}
}
/* XL Modern desktop */
#media (min-width: 1200px) {
.cloud {
width: 50%;
margin: auto;
}
}
Demo: JSFiddle