First row in Dashing dashboard not aligned

Question

I have this problem: As you can see in the picture below, I am using a layout that has only one element in the first row but it has this weird right alignment issue (it extends too far right).

HTML
CSS

What is the problem?

Here is my first element:

<li data-row="1" data-col="1" data-sizex="15" data-sizey="3" >
  <div data-id="some-id" data-view="MyWidget" data-title="Some title" style="background-color:#749396"></div>
</li>

I am using this setup in application.coffee (15 columns, 9 rows, each column/row is 100 pixels wide):

Dashing.on 'ready', ->
  Dashing.widget_margins ||= [5, 5]
  Dashing.widget_base_dimensions ||= [100, 100]
  Dashing.numColumns ||= 15

When I specifically set the width on the li, it works.

<li data-row="1" data-col="1" data-sizex="15" data-sizey="3" style="width: 1640px;">

Here is the complete dashboard layout:

<% content_for :title do %>Dashboard<% end %>
<div class="gridster">
  <ul>

    <!-- Hack: Setting width of top row to 1640px! -->

    <li data-row="1" data-col="1" data-sizex="15" data-sizey="3" style="width: 1640px;">
      <div data-id="id1" data-view="OwnWidget" style="background-color:#749396"></div>
    </li>

    <li data-row="4" data-col="1" data-sizex="5" data-sizey="4">
      <div data-id="id2" data-view="Meter" data-min="0" data-max="100"></div>
    </li>

    <li data-row="4" data-col="6" data-sizex="5" data-sizey="4">
      <div data-id="id3" data-view="Number" style="background-color:#749396"></div>
    </li>

    <li data-row="4" data-col="11" data-sizex="5" data-sizey="4">
      <div data-id="id4" data-view="Number" style="background-color:#749396"></div>
    </li>

    <li data-row="8" data-col="1" data-sizex="5" data-sizey="4">
      <div data-id="id5" data-view="Meter" data-min="0" data-max="100"></div>
    </li>

    <li data-row="8" data-col="6" data-sizex="5" data-sizey="4">
      <div data-id="id6" data-view="Number" style="background-color:#749396"></div>
    </li>

    <li data-row="8" data-col="11" data-sizex="5" data-sizey="4">
      <div data-id="id7" data-view="Number" style="background-color:#749396"></div>
    </li>

  </ul>
</div>

Answer 1

After asking the same question in the Dashing forum, I got this very satisfying answer:

https://github.com/Shopify/dashing/issues/339

Answer 2

Without any CSS code, I cannot help you any further than below:

The issue seems to be caused by padding adjustment issues. Try writing this:

li {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

This MAY (no definites here) fix your problem, as it counts padding using subtraction - not addition, which may fix your problem.

Here's an article on box-sizing from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing, and one from CSS-Tricks http://css-tricks.com/box-sizing/. They should be able to help you further in determining the problem.

Post some CSS code! We could then help you further.