I am trying to use float right on some text but it refuses to work
<p>This is for a nodecg bundle, so excuse all the seemingly useless script tags</p>

<h2>HTML</h2>

<pre><code>&lt;body&gt;
  &lt;div class="main-list"&gt;
    &lt;script&gt;
      var type="donation";
      var user="TestUser";
      var amount="$1.00";
      document.write("&lt;div class='list-element' class='" + type + "' &gt;");
      document.write(user);
      document.write("&lt;span class='pull-right'&gt;" + amount + "&lt;/span&gt;" + "&lt;/div&gt;");
    &lt;/script&gt;
  &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<h2>CSS</h2>

<pre><code>.main-list{
  margin: auto;
  width: 486px;
  color: #ecf0f1;
  font-size: 23px;
  background-color:#494949;
}
.list-element {
  list-style-type: none;
  padding-top: 9px;
  padding-left: 9px;
  height: 39px;
  border-top: 1px solid;
  rgba(125, 125, 125, .5);
  }
.pull-right: {
  float:right;
  margin-right:9px;
}
</code></pre>

<p>I know it is sloppy code and I could consolidate it into one document.write, but my issue is that I cannot get the pull-right class to move the amount to the right.</p>

<p><a href="https://jsfiddle.net/b9pzofLx/1/" rel="nofollow">https://jsfiddle.net/b9pzofLx/1/</a></p>