title: news headlines not scrolling properly
body: <p>I have made a news headlines div. The news flows from left to right smoothly. The only problem is my news text is block type. Every word is stacked on top of each other. How to solve this issue?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#news_space {
    overflow:hidden;
    width:400px;
    border:1px solid black;
    height:30px;
  }
  
  #news_headlines {
    padding-left:100%;
    animation-name:newsroll;
    animation-duration:10s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
  
   }
  
  @keyframes newsroll {
    from{transform:translate(0,0)}
    to{transform:translate(-100%,0)}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="news_space"&gt;
    &lt;div id="news_headlines"&gt;
      &lt;p&gt;Big sales today!&lt;/p&gt; &lt;p&gt;Big sales today!&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>