title: Make Span Class Responsive + Spacing between divs
body: <p>Im currently making a site, and I had a problem with viewing my element with Mobiles.</p>
  
  <p>A little bit of it bugs out of the screen, which makes it look horrible.</p>
  
  <p>This the element code:</p>
  
  <pre><code>&lt;span class="irs js-irs-0  irs-with-grid"&gt;
    &lt;span class="irs"&gt;&lt;span class="irs-line" tabindex="0"&gt;
      &lt;span class="irs-line-left"&gt;&lt;/span&gt;&lt;span class="irs-line-mid"&gt;
      &lt;/span&gt;&lt;span class="irs-line-right"&gt;&lt;/span&gt;
      &lt;/span&gt;&lt;span class="irs-min" style="visibility: hidden;"&gt;1 000&lt;/span&gt;
      &lt;span class="irs-max" style="visibility: visible;"&gt;1 000 000&lt;/span&gt;
      &lt;span class="irs-from" style="visibility: hidden;"&gt;0&lt;/span&gt;
      &lt;span class="irs-to" style="visibility: hidden;"&gt;0&lt;/span&gt;
      &lt;span class="irs-single" style="left: -5.25972%;"&gt;6 000&lt;/span&gt;
    &lt;/span&gt;&lt;span class="irs-grid" style="width: 95.9184%; left: 1.94082%;"&gt;
    &lt;span class="irs-grid-pol" style="left: 0%"&gt;&lt;/span&gt;
    &lt;span class="irs-grid-text js-grid-text-0" style="left: 0%; margin-left: -3.69898%;"&gt;1 000&lt;/span&gt;
    &lt;span class="irs-grid-pol small" style="left: 20%"&gt;&lt;/span&gt;&lt;span class="irs-grid-pol small" style="left: 15%"&gt;&lt;/span&gt;
    &lt;span class="irs-grid-pol small" style="left: 10%"&gt;&lt;/span&gt;&lt;span class="irs-grid-pol small" style="left: 5%"&gt;&lt;/span&gt;
    &lt;span class="irs-grid-pol" style="left: 25%"&gt;&lt;/span&gt;
    &lt;span class="irs-grid-text js-grid-text-1" style="left: 25%; visibility: visible; margin-left: -4.97449%;"&gt;250 750&lt;/span&gt;
    &lt;span class="irs-grid-pol small" style="left: 45%"&gt;&lt;/span&gt;&lt;span class="irs-grid-pol small" style="left: 40%"&gt;&lt;/span&gt;
    &lt;span class="irs-grid-pol small" style="left: 35%"&gt;&lt;/span&gt;&lt;span class="irs-grid-pol small" style="left: 30%"&gt;&lt;/span&gt;
    &lt;span class="irs-grid-pol" style="left: 50%"&gt;&lt;/span&gt;
    &lt;span class="irs-grid-text js-grid-text-2" style="left: 50%; visibility: visible; margin-left: -5.10204%;"&gt;500 500&lt;/span&gt;
    &lt;span class="irs-grid-pol small" style="left: 70%"&gt;&lt;/span&gt;&lt;span class="irs-grid-pol small" style="left: 65%"&gt;&lt;/span&gt;
    &lt;span class="irs-grid-pol small" style="left: 60%"&gt;&lt;/span&gt;&lt;span class="irs-grid-pol small" style="left: 55%"&gt;&lt;/span&gt;
    &lt;span class="irs-grid-pol" style="left: 75%"&gt;&lt;/span&gt;
    &lt;span class="irs-grid-text js-grid-text-3" style="left: 75%; visibility: visible; margin-left: -5.10204%;"&gt;750 250&lt;/span&gt;
    &lt;span class="irs-grid-pol small" style="left: 95%"&gt;&lt;/span&gt;&lt;span class="irs-grid-pol small" style="left: 90%"&gt;&lt;/span&gt;
    &lt;span class="irs-grid-pol small" style="left: 85%"&gt;&lt;/span&gt;&lt;span class="irs-grid-pol small" style="left: 80%"&gt;&lt;/span&gt;
    &lt;span class="irs-grid-pol" style="left: 100%"&gt;&lt;/span&gt;
    &lt;span class="irs-grid-text js-grid-text-4" style="left: 100%; margin-left: -5.9949%;"&gt;1 000 000&lt;/span&gt;
    &lt;/span&gt;&lt;span class="irs-bar" style="left: 2.04082%; width: 0.480072%;"&gt;&lt;/span&gt;&lt;span class="irs-bar-edge"&gt;&lt;/span&gt;
    &lt;span class="irs-shadow shadow-single" style="display: none;"&gt;&lt;/span&gt;
    &lt;span class="irs-slider single" style="left: 0.480072%;"&gt;&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>CSS Files:</p>
  
  <pre><code>    /* Ion.RangeSlider
      // css version 2.0.3
      // © 2013-2014 Denis Ineshin | IonDen.com
      // ===================================================================================================================*/
  
      /* =====================================================================================================================
      // RangeSlider */
  
      .irs {
          position: relative; display: block;
          -webkit-touch-callout: none;
          -webkit-user-select: none;
           -khtml-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
      }
          .irs-line {
              position: relative; display: block;
              overflow: hidden;
              outline: none !important;
          }
              .irs-line-left, .irs-line-mid, .irs-line-right {
                  position: absolute; display: block;
                  top: 0;
              }
              .irs-line-left {
                  left: 0; width: 11%;
              }
              .irs-line-mid {
                  left: 9%; width: 82%;
              }
              .irs-line-right {
                  right: 0; width: 11%;
              }
  
          .irs-bar {
              position: absolute; display: block;
              left: 0; width: 0;
          }
              .irs-bar-edge {
                  position: absolute; display: block;
                  top: 0; left: 0;
              }
  
          .irs-shadow {
              position: absolute; display: none;
              left: 0; width: 0;
          }
  
          .irs-slider {
              position: absolute; display: block;
              cursor: default;
              z-index: 1;
          }
              .irs-slider.single {
  
              }
              .irs-slider.from {
  
              }
              .irs-slider.to {
  
              }
              .irs-slider.type_last {
                  z-index: 2;
              }
  
          .irs-min {
              position: absolute; display: block;
              left: 0;
              cursor: default;
          }
          .irs-max {
              position: absolute; display: block;
              right: 0;
              cursor: default;
          }
  
          .irs-from, .irs-to, .irs-single {
              position: absolute; display: block;
              top: 0; left: 0;
              cursor: default;
              white-space: nowrap;
          }
  
      .irs-grid {
          position: absolute; display: none;
          bottom: 0; left: 0;
          width: 100%; height: 20px;
      }
      .irs-with-grid .irs-grid {
          display: block;
      }
          .irs-grid-pol {
              position: absolute;
              top: 0; left: 0;
              width: 1px; height: 8px;
              background: #000;
          }
          .irs-grid-pol.small {
              height: 4px;
          }
          .irs-grid-text {
              position: absolute;
              bottom: 0; left: 0;
              white-space: nowrap;
              text-align: center;
              font-size: 9px; line-height: 9px;
              padding: 0 3px;
              color: #000;
          }
  
      .irs-disable-mask {
          position: absolute; display: block;
          top: 0; left: -1%;
          width: 102%; height: 100%;
          cursor: default;
          background: rgba(0,0,0,0.0);
          z-index: 2;
      }
      .irs-disabled {
          opacity: 0.4;
      }
      .lt-ie9 .irs-disabled {
          filter: alpha(opacity=40);
      }
  
  
      .irs-hidden-input {
          position: absolute !important;
          display: block !important;
          top: 0 !important;
          left: 0 !important;
          width: 0 !important;
          height: 0 !important;
          font-size: 0 !important;
          line-height: 0 !important;
          padding: 0 !important;
          margin: 0 !important;
          outline: none !important;
          z-index: -9999 !important;
          background: none !important;
          border-style: solid !important;
          border-color: transparent !important;
      }
      /* Ion.RangeSlider, Flat UI Skin
      // css version 2.0.3
      // © Denis Ineshin, 2014    https://github.com/IonDen
      // ===================================================================================================================*/
  
      /* =====================================================================================================================
      // Skin details */
  
      .irs-line-mid,
      .irs-line-left,
      .irs-line-right,
      .irs-bar,
      .irs-bar-edge,
      .irs-slider {
          background: url(../img/sprite-skin-flat.png) repeat-x;
      }
  
      .irs {
          height: 40px;
      }
      .irs-with-grid {
          height: 60px;
      }
      .irs-line {
          height: 12px; top: 25px;
      }
          .irs-line-left {
              height: 12px;
              background-position: 0 -30px;
          }
          .irs-line-mid {
              height: 12px;
              background-position: 0 0;
          }
          .irs-line-right {
              height: 12px;
              background-position: 100% -30px;
          }
  
      .irs-bar {
          height: 12px; top: 25px;
          background-position: 0 -60px;
      }
          .irs-bar-edge {
              top: 25px;
              height: 12px; width: 9px;
              background-position: 0 -90px;
          }
  
      .irs-shadow {
          height: 3px; top: 34px;
          background: #000;
          opacity: 0.25;
      }
      .lt-ie9 .irs-shadow {
          filter: alpha(opacity=25);
      }
  
      .irs-slider {
          width: 16px; height: 18px;
          top: 22px;
          background-position: 0 -120px;
      }
      .irs-slider.state_hover, .irs-slider:hover {
          background-position: 0 -150px;
      }
  
      .irs-min, .irs-max {
          color: #999;
          font-size: 10px; line-height: 1.333;
          text-shadow: none;
          top: 0; padding: 1px 3px;
          background: #e1e4e9;
          -moz-border-radius: 4px;
          border-radius: 4px;
      }
  
      .irs-from, .irs-to, .irs-single {
          color: #fff;
          font-size: 10px; line-height: 1.333;
          text-shadow: none;
          padding: 1px 5px;
          background: #ed5565;
          -moz-border-radius: 4px;
          border-radius: 4px;
      }
      .irs-from:after, .irs-to:after, .irs-single:after {
          position: absolute; display: block; content: "";
          bottom: -6px; left: 50%;
          width: 0; height: 0;
          margin-left: -3px;
          overflow: hidden;
          border: 3px solid transparent;
          border-top-color: #ed5565;
      }
  
  
      .irs-grid-pol {
          background: #e1e4e9;
      }
      .irs-grid-text {
          color: #999;
      }
  
      .irs-disabled {
      }
  /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  
  /**
   * 1. Set default font family to sans-serif.
   * 2. Prevent iOS text size adjust after orientation change, without disabling
   *    user zoom.
   */
  
  html {
      font-family: sans-serif; /* 1 */
      -ms-text-size-adjust: 100%; /* 2 */
      -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /**
   * Remove default margin.
   */
  
  body {
      margin: 0;
  }
  
  /* HTML5 display definitions
     ========================================================================== */
  
  /**
   * Correct `block` display not defined for any HTML5 element in IE 8/9.
   * Correct `block` display not defined for `details` or `summary` in IE 10/11
   * and Firefox.
   * Correct `block` display not defined for `main` in IE 11.
   */
  
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  main,
  menu,
  nav,
  section,
  summary {
      display: block;
  }
  
  /**
   * 1. Correct `inline-block` display not defined in IE 8/9.
   * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
   */
  
  audio,
  canvas,
  progress,
  video {
      display: inline-block; /* 1 */
      vertical-align: baseline; /* 2 */
  }
  
  /**
   * Prevent modern browsers from displaying `audio` without controls.
   * Remove excess height in iOS 5 devices.
   */
  
  audio:not([controls]) {
      display: none;
      height: 0;
  }
  
  /**
   * Address `[hidden]` styling not present in IE 8/9/10.
   * Hide the `template` element in IE 8/9/11, Safari, and Firefox &lt; 22.
   */
  
  [hidden],
  template {
      display: none;
  }
  
  /* Links
     ========================================================================== */
  
  /**
   * Remove the gray background color from active links in IE 10.
   */
  
  a {
      background-color: transparent;
  }
  
  /**
   * Improve readability when focused and also mouse hovered in all browsers.
   */
  
  a:active,
  a:hover {
      outline: 0;
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
   */
  
  abbr[title] {
      border-bottom: 1px dotted;
  }
  
  /**
   * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
   */
  
  b,
  strong {
      font-weight: bold;
  }
  
  /**
   * Address styling not present in Safari and Chrome.
   */
  
  dfn {
      font-style: italic;
  }
  
  /**
   * Address variable `h1` font-size and margin within `section` and `article`
   * contexts in Firefox 4+, Safari, and Chrome.
   */
  
  h1 {
      font-size: 2em;
      margin: 0.67em 0;
  }
  
  /**
   * Address styling not present in IE 8/9.
   */
  
  mark {
      background: #ff0;
      color: #000;
  }
  
  /**
   * Address inconsistent and variable font size in all browsers.
   */
  
  small {
      font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` affecting `line-height` in all browsers.
   */
  
  sub,
  sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
  }
  
  sup {
      top: -0.5em;
  }
  
  sub {
      bottom: -0.25em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove border when inside `a` element in IE 8/9/10.
   */
  
  img {
      border: 0;
  }
  
  /**
   * Correct overflow not hidden in IE 9/10/11.
   */
  
  svg:not(:root) {
      overflow: hidden;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * Address margin not present in IE 8/9 and Safari.
   */
  
  figure {
      margin: 1em 40px;
  }
  
  /**
   * Address differences between Firefox and other browsers.
   */
  
  hr {
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      height: 0;
  }
  
  /**
   * Contain overflow in all browsers.
   */
  
  pre {
      overflow: auto;
  }
  
  /**
   * Address odd `em`-unit font size rendering in all browsers.
   */
  
  code,
  kbd,
  pre,
  samp {
      font-family: monospace, monospace;
      font-size: 1em;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * Known limitation: by default, Chrome and Safari on OS X allow very limited
   * styling of `select`, unless a `border` property is set.
   */
  
  /**
   * 1. Correct color not being inherited.
   *    Known issue: affects color of disabled elements.
   * 2. Correct font properties not being inherited.
   * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
      color: inherit; /* 1 */
      font: inherit; /* 2 */
      margin: 0; /* 3 */
  }
  
  /**
   * Address `overflow` set to `hidden` in IE 8/9/10/11.
   */
  
  button {
      overflow: visible;
  }
  
  /**
   * Address inconsistent `text-transform` inheritance for `button` and `select`.
   * All other form control elements do not inherit `text-transform` values.
   * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
   * Correct `select` style inheritance in Firefox.
   */
  
  button,
  select {
      text-transform: none;
  }
  
  /**
   * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
   *    and `video` controls.
   * 2. Correct inability to style clickable `input` types in iOS.
   * 3. Improve usability and consistency of cursor style between image-type
   *    `input` and others.
   */
  
  button,
  html input[type="button"], /* 1 */
  input[type="reset"],
  input[type="submit"] {
      -webkit-appearance: button; /* 2 */
      cursor: pointer; /* 3 */
  }
  
  /**
   * Re-set default cursor for disabled elements.
   */
  
  button[disabled],
  html input[disabled] {
      cursor: default;
  }
  
  /**
   * Remove inner padding and border in Firefox 4+.
   */
  
  button::-moz-focus-inner,
  input::-moz-focus-inner {
      border: 0;
      padding: 0;
  }
  
  /**
   * Address Firefox 4+ setting `line-height` on `input` using `!important` in
   * the UA stylesheet.
   */
  
  input {
      line-height: normal;
  }
  
  /**
   * It's recommended that you don't attempt to style these elements.
   * Firefox's implementation doesn't respect box-sizing, padding, or width.
   *
   * 1. Address box sizing set to `content-box` in IE 8/9/10.
   * 2. Remove excess padding in IE 8/9/10.
   */
  
  input[type="checkbox"],
  input[type="radio"] {
      box-sizing: border-box; /* 1 */
      padding: 0; /* 2 */
  }
  
  /**
   * Fix the cursor style for Chrome's increment/decrement buttons. For certain
   * `font-size` values of the `input`, it causes the cursor style of the
   * decrement button to change from `default` to `text`.
   */
  
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
      height: auto;
  }
  
  /**
   * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
   * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
   *    (include `-moz` to future-proof).
   */
  
  input[type="search"] {
      -webkit-appearance: textfield; /* 1 */
      -moz-box-sizing: content-box;
      -webkit-box-sizing: content-box; /* 2 */
      box-sizing: content-box;
  }
  
  /**
   * Remove inner padding and search cancel button in Safari and Chrome on OS X.
   * Safari (but not Chrome) clips the cancel button when the search input has
   * padding (and `textfield` appearance).
   */
  
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-decoration {
      -webkit-appearance: none;
  }
  
  /**
   * Define consistent border, margin, and padding.
   */
  
  fieldset {
      border: 1px solid #c0c0c0;
      margin: 0 2px;
      padding: 0.35em 0.625em 0.75em;
  }
  
  /**
   * 1. Correct `color` not being inherited in IE 8/9/10/11.
   * 2. Remove padding so people aren't caught out if they zero out fieldsets.
   */
  
  legend {
      border: 0; /* 1 */
      padding: 0; /* 2 */
  }
  
  /**
   * Remove default vertical scrollbar in IE 8/9/10/11.
   */
  
  textarea {
      overflow: auto;
  }
  
  /**
   * Don't inherit the `font-weight` (applied by a rule above).
   * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
   */
  
  optgroup {
      font-weight: bold;
  }
  
  /* Tables
     ========================================================================== */
  
  /**
   * Remove most spacing between table cells.
   */
  
  table {
      border-collapse: collapse;
      border-spacing: 0;
  }
  
  td,
  th {
      padding: 0;
  }
  </code></pre>
  
  <p>I want it to fit into the screen, so you dont have to scroll sidewards, how do I do that?</p>
  
  <p>Is there also an Option to make a side gap, so that it doesnt exactly fit on to the edge.</p>
  
  <p>And how can I make a gap between 2 divs?</p>