title: Why the text keeps stay out of my bubble box?
body: <p>I can't understand why the text I'm trying to get in the bubble box won't be there. </p>
  
  <p><a href="http://imgbin.org/images/22689.jpg" rel="nofollow">Here</a> is the link to a picture of what I see</p>
  
  <p>I'm super newbie and this might be a very stupid question, but I spent like 40 minutes trying to figure out what's wrong.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  
  .bubble
  {
      position: absolute;
      width: 230px;
      height: 33px;
      text-align: left;
      font-size: 10px;
      line-height: 100px;
      background-color: #00ff00;
      border-radius: 10px;
      margin-top: 100px;
      margin-left: 200px;
  }
  .bubble:after
  {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      left: 20px;
      top: 33px;
      border: 22px solid;
      border-color: #00ff00 transparent transparent #00ff00;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
          &lt;div class="bubble"&gt;im lemon im a little spaghetti&lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Help </p>