title: issue with spacing list items on a page
body: <p>I need help trying to space an unordered list of items on a page here is what it currently looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/nujAc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nujAc.png" alt="enter image description here"></a></p>
  
  <p>I want the border with the message "Drag a page..." to be on the right side</p>
  
  <p>like this: <a href="https://i.stack.imgur.com/6PEzD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6PEzD.png" alt="enter image description here"></a></p>
  
  <p>Here is the HTML: (razor)</p>
  
  <pre><code>&lt;div class="admin registrationFields white-strip padded"&gt;
      &lt;div class="well container"&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;&lt;span class="glyphicon glyphicon-file"&gt;&lt;/span&gt;@ViewBag.Title&lt;/legend&gt;
  
              &lt;br/&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.SelectedSiteId, new {@class = "col-md-2"})
                  &lt;div class="col-md-6"&gt;
                      @Html.DropDownListFor(model =&gt; model.SelectedSiteId, new SelectList(Model.AllSites, "SiteId", "SiteName", Model.SelectedSiteId), new {@class = "form-control"})
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
  
  
              &lt;ul class="list-group page-reordering"&gt;
                  @foreach (var page in Model.Pages.Where(p =&gt; p.ParentMenuID == null))
                  {
                      &lt;li class="list-group-item margin-space-reorder" data-menuid="@page.MenuID"&gt;
                          &lt;h4&gt;@page.PageName&lt;/h4&gt;
                          &lt;ul class="list-group"&gt;
  
                              @foreach (var child in Model.Pages.Where(p =&gt; p.ParentMenuID == page.MenuID).OrderBy(o =&gt; o.MenuOrder))
                              {
  
                                  &lt;li class="list-group-item active" data-menuid="@child.MenuID"&gt;
                                      &lt;h4&gt;@child.PageName&lt;/h4&gt;
                                  &lt;/li&gt;
  
                              }
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  }
              &lt;/ul&gt;
              &lt;input id="page-order" name="page-order" type="hidden" value=""&gt;
              &lt;input type="button" value="Save" class="btn btn-primary" id="SaveOrderPage"&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  }
  </code></pre>
  
  <p>and here is the css:</p>
  
  <pre><code>.page-reordering .list-group-item {
      background-color: #3071a9;  
  }
  
  .margin-space-reorder {
      margin: 15px 0;
  }
  .page-reordering .list-group {
     min-height: 60px;
     border: 1px #fff solid;
     border-radius: 5px;
  }
  
  .page-reordering .list-group:before {
      content: 'Drag a page here to create a child page of this parent.';
      color: #AEAEAE;
      font-size: 25px;
      font-style: italic;
      padding-left: 10px;    
  }
  
  .page-reordering .list-group-item h4 {
     color: #fff;    
  }
  .page-reordering .list-group-item li h4 {
     padding-left: 1px;    
  }
  </code></pre>
  
  <p>Any help is greatly appreciated.</p>