title: CSS help needed. Something really wrong
body: <p>Third chat message should be same as first chat message. its even a wrong direction and color.
  <img src="https://i.stack.imgur.com/p6sEH.png" alt="This is my problem.">
  <a href="https://jsfiddle.net/pto8ce70/" rel="nofollow noreferrer">JSFIDDLE</a></p>
  
  <p>CSS</p>
  
  <p>..........................................................................................................................................................</p>
  
  <pre><code>.chat {
      max-height: 570px; 
      overflow: auto; 
      margin: 0 0 30px 0; 
      border-top: 1px solid #ddd; 
      border-bottom: 1px solid #ddd; 
      background-color: #fff;
  }
  
  .chat .message { 
      float: left; 
      clear: both; 
      max-width: 80%; 
      padding: 0 0 20px 0; 
      position: relative; 
  }
  
  .chat .message:first-child { 
      padding-top: 20px; 
  }
  
  .chat .message.in { 
      float: left;
  }
  
  .chat .message.out { 
      float: right;
  }
  
  .chat .message img.avatar {
      height: 45px;
      width: 45px;
  }
  
  .chat .message.in img.avatar {
      float: left;
      margin-right: 10px;
      margin-top: 0px;
  }
  
  .chat .message.out img.avatar {
      float: right;
      margin-left: 10px;
      margin-top: 0px;
  }
  
  .chat .message .content { 
      padding: 12px 14px;
      position: relative;
  }
  
  .chat .message.in .content { 
      color: #FFFFFF;
      background-color: #65CEA7;
      margin-left: 58px; 
  
  }
  .chat .message.out .content { 
      color: #333; 
      background-color: #EFF0F4;
      margin-right: 58px; 
      border: 1px solid #e5e5e5; 
  }
  
  .chat .message.in .content:after { 
      border-top: 6px solid rgba(0, 0, 0, 0); 
      border-right: 6px solid #65CEA7; 
      border-bottom: 6px solid rgba(0, 0, 0, 0); 
      left: -6px; top: 13px; 
      position: absolute; 
      margin-left: 0; 
      content: ''; 
  }
  
  .chat .message.out .content:before { 
      position: absolute; 
      top: 12px; 
      right: 0; 
      display: inline-block; 
      border-top: 7px solid rgba(0, 0, 0, 0);
      border-left: 7px solid #e5e5e5; 
      border-bottom: 7px solid rgba(0, 0, 0, 0); 
      border-left-color: rgba(0, 0, 0, 0.2); 
      content: ''; 
      margin-right: -7px; 
  }
  
  .chat .message.out .content:after { 
      position: absolute; 
      top: 13px; 
      right: 1px; 
      left: auto; 
      display: inline-block; 
      border-top: 6px solid rgba(0, 0, 0, 0); 
      border-left: 6px solid #fff; 
      border-bottom: 6px solid rgba(0, 0, 0, 0);
      border-right: 0; 
      content: ''; 
      margin-right: -7px; 
  }
  
  .chat .message .content .name {
      font-size: 13px;
      font-weight: bold;
  }
  
  .chat .message.in .content a.name{
      color: #fff;
  }
  
  .chat .message.out .content a.name {
      color: #333;
  }
  
  .chat .message .content .date {
      font-size: 13px;
      font-weight: 400;
  }
  
  .chat .message.in .content .date {
      color: #fff;
      opacity: 0.6;
  }
  
  .chat .message.out .content .date {
      color: #000000;
      opacity: 0.6;
  }
  
  .chat .message .content .body { 
      padding-left: 1px;
  }
  
  .chat .message .content, 
  .chat .message img.avatar {
      border-radius: 2px;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
  </code></pre>
  
  <h2>    }</h2>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="chat"&gt;
          &lt;div class="message in"&gt;
              &lt;img src="http://img2.wikia.nocookie.net/__cb20130220074109/halo/images/8/8d/USER_Sgt_D_Grif_avatar.png" alt="" class="avatar"&gt;
              &lt;div class="content"&gt;
                  &lt;a href="javascript:void(0);" class="name"&gt;Margaret J. Collins&lt;/a&gt;
                  &lt;span class="date"&gt;at Mar 12, 2014 6:13&lt;/span&gt;
                  &lt;div class="body"&gt;
                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.                       
                  &lt;/div&gt;
              &lt;/div&gt; 
          &lt;/div&gt;
          &lt;div class="message out"&gt;
              &lt;img src="http://img2.wikia.nocookie.net/__cb20130220074109/halo/images/8/8d/USER_Sgt_D_Grif_avatar.png" alt="" class="avatar"&gt;
                  &lt;div class="content"&gt;
                  &lt;a href="javascript:void(0);" class="name"&gt;Joseph R. Colston&lt;/a&gt;
                  &lt;span class="date"&gt;at Mar 12, 2014 6:13&lt;/span&gt;
                  &lt;div class="body"&gt;
                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.        
                  &lt;/div&gt;
              &lt;div&gt;
          &lt;/div&gt;
          &lt;div class="message in"&gt;
              &lt;img src="http://img2.wikia.nocookie.net/__cb20130220074109/halo/images/8/8d/USER_Sgt_D_Grif_avatar.png" alt="" class="avatar"&gt;
              &lt;div class="content"&gt;
                  &lt;a href="javascript:void(0);" class="name"&gt;Margaret J. Collins&lt;/a&gt;
                  &lt;span class="date"&gt;at Mar 12, 2014 6:13&lt;/span&gt;
                  &lt;div class="body"&gt;
                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.                       
                  &lt;/div&gt;
              &lt;/div&gt; 
          &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>