Limit div width and center

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