title: CSS: Google Chrome doing strange things with inline-block on centred UL element
body: <p>I have some strange and disturbing things happening on Chrome with UL elements set to <code>display:inline-block;</code></p>
  
  <p>On MY screen, it seems to display absolutely fine each and every time:</p>
  
  <p><img src="https://i.stack.imgur.com/UuLEZ.png" alt="My Working Example"></p>
  
  <p>However on my colleagues Chrome browser (same version):</p>
  
  <p><img src="https://i.stack.imgur.com/fHRle.jpg" alt="Not Working Example"></p>
  
  <p>What's disturbing about it, is that if he brings up developer console and simply turns <code>display:inline-block;</code> off and on again, it works!</p>
  
  <p>Here's my live example - <a href="http://jsfiddle.net/Bsm4t/" rel="nofollow noreferrer">http://jsfiddle.net/Bsm4t/</a></p>
  
  <p>Anyone have any idea what on earth is causing it, or how I might possibly debug it or even fix it?</p>
  
  <p>Oh and here's some code snippet for if the link stops working:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
  &lt;p&gt;Pulse will enable you to manage your mobile assets in a way that no other solution on the market currently offers. Pulse comprises of the following 3 modules:&lt;/p&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="/product-portfolio/enterprise-mobility/pulse/live-planning-and-execution.html"&gt;&lt;strong&gt;Live Planning and Execution&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Manage resources in real-time using detailed maps and user friendly applications&lt;/p&gt;
  
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="/product-portfolio/enterprise-mobility/pulse/mobility-pulse-mobile.html"&gt;&lt;strong&gt;Mobility – Pulse Mobile&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@import url(http://fonts.googleapis.com/css?family=Patua+One|Fjord+One|Imprima|Reenie+Beanie);
  
  div {
      width:80%;
      text-align:center;
      font-size: 62.5%;
      font-family: "Imprima", "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
  }
  * {
      -webkit-backface-visibility: hidden;
  }
  ul, ol {
      display: inline-block;
      text-align: left;
      vertical-align: top;
  }
  ul li,
  ol li {
      margin:0 0 5px 0;   
      list-style-position:inside;
  }
  ul ul,
  ul ol,
  ol ol,
  ol ul {
     padding:0;
     margin:30px 0 0 0; 
  }
  </code></pre>