title: Margin-right not working with right floated element in bootstrap
body: <p>I have a div called <code>chat-sample</code> with two elements, one floated to the left and the other to the right:</p>
  
  <pre><code>&lt;div class='chat-sample'&gt;&lt;p class='text-muted pull-left'&gt;Did you know that there are only really 3 continets on earth? Please reply with interest for an explanation.&lt;/p&gt;&lt;div class='delete pull-right'&gt;&lt;span class='glyphicon glyphicon-trash'&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I am trying the <code>margin-right</code> property on the paragraph (when there is a long message) so that the trash icon doesn't move to a new line but it doesn't work.</p>
  
  <pre><code>.chat-sample p {
      margin-right: 120px;
  }
  </code></pre>
  
  <p>I would like the trash icon in the same position as the other messages from Boss and John Appleseed.
  <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>.glyphicon-user {
      font-size: 25px;
      color: #3399ff;
      margin-left: 15px;
  }
  
  .panel-heading {
   position: -webkit-sticky;
     position: -moz-sticky;
     position: -ms-sticky;
     position: -o-sticky;
     position: sticky;
   width: 100%;
   z-index: 99999;
   top: 0;
  }
  
  .panel-heading h1 {
   padding-bottom: 0.65em;
   color: #3399ff;
   font-weight: bold;
  }
  
  .panel-body {
   padding: 0;
  }
  
  .col-xs-12 {
   padding-left: 0;
   padding-right: 0;
  }
  
  .chats {
   list-style-type: none;
   margin: 0;
   padding: 0;
  }
  
  .chats li {
   border-bottom: 2px solid #eee;
  }
  
  .chats a {
   display: block;
   color: #000;
   text-decoration: none;
   height: 85px;
   padding: 15px 0;
  }
  
  .chats a:hover,
  .chats a:hover .glyphicon-user,
  .chats a:hover .text-muted {
   background-color: #3399ff;
   color: white;
  }
  
  .chats .sender {
   margin-left: 10px;
  }
  
  .chats .timestamp {
   margin-right: 15px;
  }
  
  .chats .chat-sample {
   clear: right;
   margin-left: 50px;
   padding-top: 5px;
  }
  
  .chat-sample p {
   margin-right: 120px;
  }
  
  .chats .delete {
   margin-right: 30px;
   margin-top: 15px;
  }
  
  .chats li:last-child {
   border-bottom: none;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class='container'&gt;
    &lt;div class='row'&gt;
     &lt;div class='col-sm-6 col-xs-12 col-centered'&gt;
      &lt;div class='panel panel-default'&gt;
       &lt;div class='panel-heading sticky'&gt;
        &lt;div class='btn-group pull-left'&gt;
         &lt;div class='dropdown'&gt;
          &lt;button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'&gt;
           &lt;span class='glyphicon glyphicon-cog'&lt;/span&gt;
          &lt;/button&gt;
          &lt;ul class='dropdown-menu'&gt;
           &lt;li&gt;&lt;a href='#'&gt;Delete All Chats&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href='#'&gt;Log Out&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
         &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class='btn-group pull-right'&gt;
         &lt;div class='dropdown'&gt;
          &lt;button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'&gt;
           &lt;span class='glyphicon glyphicon-plus'&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;ul class='dropdown-menu dropdown-menu-right'&gt;
           &lt;li&gt;&lt;a href='#'&gt;New Chat&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
         &lt;/div&gt;
        &lt;/div&gt;
        &lt;h1 class='panel-title text-center'&gt;FunChat&lt;/h1&gt;
       &lt;/div&gt;
       &lt;div class='panel-body'&gt;
        &lt;ul class='chats'&gt;
         &lt;li&gt;
          &lt;a href='#'&gt;
           &lt;div class='chat-img pull-left'&gt;&lt;span class='glyphicon glyphicon-user'&gt;&lt;/span&gt;&lt;/div&gt;
           &lt;div class='sender pull-left'&gt;&lt;strong&gt;John Appleseed&lt;/strong&gt;&lt;/div&gt;
           &lt;div class='timestamp text-muted pull-right'&gt;&lt;small&gt;&lt;span class='glyphicon glyphicon-time'&gt;&lt;/span&gt; 08/12/2016&lt;/small&gt;&lt;/div&gt;
           &lt;div class='chat-sample'&gt;&lt;p class='text-muted pull-left'&gt;What time is it?&lt;/p&gt;&lt;div class='delete pull-right'&gt;&lt;span class='glyphicon glyphicon-trash'&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;/a&gt;
         &lt;/li&gt;
         &lt;li&gt;
          &lt;a href='#'&gt;
           &lt;div class='chat-img pull-left'&gt;&lt;span class='glyphicon glyphicon-user'&gt;&lt;/span&gt;&lt;/div&gt;
           &lt;div class='sender pull-left'&gt;&lt;strong&gt;Teacher&lt;/strong&gt;&lt;/div&gt;
           &lt;div class='timestamp text-muted pull-right'&gt;&lt;small&gt;&lt;span class='glyphicon glyphicon-time'&gt;&lt;/span&gt; 08/12/2016&lt;/small&gt;&lt;/div&gt;
           &lt;div class='chat-sample'&gt;&lt;p class='text-muted pull-left'&gt;Did you know that there are only really 3 continets on earth? Please reply with interest for an explanation.&lt;/p&gt;&lt;div class='delete pull-right'&gt;&lt;span class='glyphicon glyphicon-trash'&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;/a&gt;
         &lt;/li&gt;
         &lt;li&gt;
          &lt;a href='#'&gt;
           &lt;div class='chat-img pull-left'&gt;&lt;span class='glyphicon glyphicon-user'&gt;&lt;/span&gt;&lt;/div&gt;
           &lt;div class='sender pull-left'&gt;&lt;strong&gt;Boss&lt;/strong&gt;&lt;/div&gt;
           &lt;div class='timestamp text-muted pull-right'&gt;&lt;small&gt;&lt;span class='glyphicon glyphicon-time'&gt;&lt;/span&gt; 08/12/2016&lt;/small&gt;&lt;/div&gt;
           &lt;div class='chat-sample'&gt;&lt;p class='text-muted pull-left'&gt;Why aren't you at work?&lt;/p&gt;&lt;div class='delete pull-right'&gt;&lt;span class='glyphicon glyphicon-trash'&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;/a&gt;
         &lt;/li&gt;
        &lt;/ul&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;&lt;!--end column--&gt;
    &lt;/div&gt;&lt;!--end row 1--&gt;
  &lt;/div&gt;&lt;!--end container--&gt;</code></pre>
  </div>
  </div>
  </p>