title: Modify the gap between two divs
body: <p>I just noticed this amazing article on items slider <a href="http://tympanus.net/codrops/2012/12/31/how-to-create-a-simple-multi-item-slider/" rel="nofollow">Article from codrops</a>: The demo is available here <a href="http://tympanus.net/Tutorials/ItemSlider/" rel="nofollow">Demo of the article "How to Create a Simple Multi-Item Slider"</a></p>
  
  <p>I Would like to implement the same thing on my website by just making some few changes.</p>
  
  <p>The display of the items  is made up of three mains file:</p>
  
  <p>HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="container"&gt; 
     &lt;header&gt;
      &lt;h1&gt;Simple Multi-Item Slider &lt;span&gt;Category slider with CSS animations&lt;/span&gt;&lt;/h1&gt;
     &lt;/header&gt;
     &lt;div class="main"&gt;
      &lt;div id="mi-slider" class="mi-slider"&gt;
       &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/1.jpg" alt="img01"&gt;&lt;h4&gt;Boots&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/2.jpg" alt="img02"&gt;&lt;h4&gt;Oxfords&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/3.jpg" alt="img03"&gt;&lt;h4&gt;Loafers&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/4.jpg" alt="img04"&gt;&lt;h4&gt;Sneakers&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
       &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/5.jpg" alt="img05"&gt;&lt;h4&gt;Belts&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/6.jpg" alt="img06"&gt;&lt;h4&gt;Hats &amp;amp; Caps&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/7.jpg" alt="img07"&gt;&lt;h4&gt;Sunglasses&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/8.jpg" alt="img08"&gt;&lt;h4&gt;Scarves&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
       &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/9.jpg" alt="img09"&gt;&lt;h4&gt;Casual&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/10.jpg" alt="img10"&gt;&lt;h4&gt;Luxury&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/11.jpg" alt="img11"&gt;&lt;h4&gt;Sport&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
       &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/12.jpg" alt="img12"&gt;&lt;h4&gt;Carry-Ons&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/13.jpg" alt="img13"&gt;&lt;h4&gt;Duffel Bags&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/14.jpg" alt="img14"&gt;&lt;h4&gt;Laptop Bags&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/15.jpg" alt="img15"&gt;&lt;h4&gt;Briefcases&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
       &lt;nav&gt;
        &lt;a href="#"&gt;Shoes&lt;/a&gt;
        &lt;a href="#"&gt;Accessories&lt;/a&gt;
        &lt;a href="#"&gt;Watches&lt;/a&gt;
        &lt;a href="#"&gt;Bags&lt;/a&gt;
       &lt;/nav&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /container --&gt;
    </code></pre>
  </div>
  </div>
  </p>
  
  <p>First CSS file (demo.css)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* General Demo Style */
  @import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);
  
  html { height: 100%; }
  
  *,
  *:after,
  *:before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
  }
  
  /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
  .clearfix:before,
  .clearfix:after {
      content: " ";
      display: table;
  }
  
  .clearfix:after {
      clear: both;
  }
  
  .clearfix {
      *zoom: 1;
  }
  
  body {
      font-family: 'Lato', Calibri, Arial, sans-serif;
      background: #fff;
      font-weight: 400;
      font-size: 15px;
      color: #333;
      overflow: scroll;
      overflow-x: hidden;
  }
  
  a {
   color: #555;
   text-decoration: none;
  }
  
  .container {
   width: 100%;
   position: relative;
  }
  
  .container &gt; header {
   width: 90%;
   max-width: 1240px;
   margin: 0 auto;
   position: relative;
   padding: 30px;
  }
  
  .main {
   padding-bottom: 80px;
  }
  
  .container &gt; header h1 {
   font-size: 34px;
   line-height: 38px;
   margin: 0;
   font-weight: 700;
   color: #333;
   float: left;
  }
  
  .container &gt; header h1 span {
   display: block;
   font-size: 20px;
   line-height: 26px;
   font-weight: 300;
  }
  
  /* Header Style */
  .codrops-top {
   line-height: 24px;
   font-size: 11px;
   background: #fff;
   background: rgba(255, 255, 255, 0.5);
   text-transform: uppercase;
   z-index: 9999;
   position: relative;
   box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
  }
  
  .codrops-top a {
   padding: 0px 10px;
   letter-spacing: 1px;
   color: #333;
   display: inline-block;
  }
  
  .codrops-top a:hover {
   background: rgba(255,255,255,0.8);
   color: #000;
  }
  
  .codrops-top span.right {
   float: right;
  }
  
  .codrops-top span.right a {
   float: left;
   display: block;
  }
  
  /* Demo Buttons Style */
  .codrops-demos {
   float: right;
   padding-top: 10px;
  }
  
  .codrops-demos a {
      display: inline-block;
      margin: 10px;
      color: #666;
      font-weight: 700;
      line-height: 30px;
      border-bottom: 4px solid transparent;
  }
  
  .codrops-demos a:hover {
   color: #000;
   border-color: #000;
  }
  
  .codrops-demos a.current-demo,
  .codrops-demos a.current-demo:hover {
   color: #aaa;
   border-color: #aaa;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Second CSS file (style.css)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('demo.css');
  
  .mi-slider {
   position: relative;
   margin-top: 30px;
   height: 490px;
  }
  
  .mi-slider ul {
   list-style-type: none;
   position: absolute;
   width: 100%;
   left: 0;
   bottom: 140px;
   overflow: hidden;
   text-align: center;
   pointer-events: none;
  }
  
  .no-js .mi-slider ul {
   position: relative;
   left: auto;
   bottom: auto;
   margin: 0;
   overflow: visible;
  }
  
  .mi-slider ul.mi-current {
   pointer-events: auto;
  }
  
  .mi-slider ul li {
   display: inline-block;
   padding: 20px;
   width: 20%;
   max-width: 300px;
   -webkit-transform: translateX(600%);
   transform: translateX(600%);
   -webkit-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
  }
  
  .no-js .mi-slider ul li {
   -webkit-transform: translateX(0);
   transform: translateX(0);
  }
  
  .mi-slider ul li a,
  .mi-slider ul li img {
   display: block;
   margin: 0 auto;
  }
  
  .mi-slider ul li a {
   outline: none;
   cursor: pointer;
  }
  
  .mi-slider ul li img {
   max-width: 100%;
   border: none;
  }
  
  .mi-slider ul li h4 {
   display: inline-block;
   font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
   font-style: italic;
   font-weight: 400;
   font-size: 18px;
   padding: 20px 10px 0;
  }
  
  .mi-slider ul li:hover {
   opacity: 0.7;
  } 
  
  .mi-slider nav {
   position: relative;
   top: 400px;
   text-align: center;
   max-width: 800px;
   margin: 0 auto;
   border-top: 5px solid #333;
  }
  
  .no-js nav {
   display: none;
  }
  
  .mi-slider nav a {
   display: inline-block;
   text-transform: uppercase;
   letter-spacing: 5px;
   padding: 40px 30px 30px 34px;
   position: relative;
   color: #888;
   outline: none;
   -webkit-transition: color 0.2s linear;
   transition: color 0.2s linear;
  }
  
  .mi-slider nav a:hover,
  .mi-slider nav a.mi-selected {
   color: #000;
  }
  
  .mi-slider nav a.mi-selected:after,
  .mi-slider nav a.mi-selected:before {
   content: '';
   position: absolute;
   top: -5px;
   border: solid transparent;
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
  }
  
  .mi-slider nav a.mi-selected:after {
   border-color: transparent;
   border-top-color: #fff;
   border-width: 20px;
   left: 50%;
   margin-left: -20px;
  }
  
  .mi-slider nav a.mi-selected:before {
   border-color: transparent;
   border-top-color: #333;
   border-width: 27px;
   left: 50%;
   margin-left: -27px;
  }
  
  /* Move classes and animations */
  
  .mi-slider ul:first-child li,
  .no-js .mi-slider ul li {
   -webkit-animation: scaleUp 350ms ease-in-out both;
   animation: scaleUp 350ms ease-in-out both;
  }
  
  @-webkit-keyframes scaleUp {
   0% { -webkit-transform: translateX(0) scale(0); }
   100% { -webkit-transform: translateX(0) scale(1); }
  }
  
  @keyframes scaleUp {
   0% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0); }
   100% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1); }
  }
  
  .mi-slider ul:first-child li:first-child {
   -webkit-animation-delay: 90ms;
   animation-delay: 90ms;
  }
  
  .mi-slider ul:first-child li:nth-child(2) {
   -webkit-animation-delay: 180ms;
   animation-delay: 180ms;
  }
  
  .mi-slider ul:first-child li:nth-child(3) {
   -webkit-animation-delay: 270ms;
   animation-delay: 270ms;
  }
  
  .mi-slider ul:first-child li:nth-child(4) {
   -webkit-animation-delay: 360ms;
   animation-delay: 360ms;
  }
  
  /* moveFromRight */
  
  .mi-slider ul.mi-moveFromRight li {
   -webkit-animation: moveFromRight 350ms ease-in-out both;
   animation: moveFromRight 350ms ease-in-out both;
  }
  
  /* moveFromLeft */
  
  .mi-slider ul.mi-moveFromLeft li {
   -webkit-animation: moveFromLeft 350ms ease-in-out both;
   animation: moveFromLeft 350ms ease-in-out both;
  }
  
  /* moveToRight */
  
  .mi-slider ul.mi-moveToRight li {
   -webkit-animation: moveToRight 350ms ease-in-out both;
   animation: moveToRight 350ms ease-in-out both;
  }
  
  /* moveToLeft */
  
  .mi-slider ul.mi-moveToLeft li {
   -webkit-animation: moveToLeft 350ms ease-in-out both;
   animation: moveToLeft 350ms ease-in-out both;
  }
  
  /* Animation Delays */
  
  .mi-slider ul.mi-moveToLeft li:first-child,
  .mi-slider ul.mi-moveFromRight li:first-child,
  .mi-slider ul.mi-moveToRight li:nth-child(4),
  .mi-slider ul.mi-moveFromLeft li:nth-child(4) {
   -webkit-animation-delay: 0ms;
   animation-delay: 0ms;
  }
  
  .mi-slider ul.mi-moveToLeft li:nth-child(2),
  .mi-slider ul.mi-moveFromRight li:nth-child(2),
  .mi-slider ul.mi-moveToRight li:nth-child(3),
  .mi-slider ul.mi-moveFromLeft li:nth-child(3) {
   -webkit-animation-delay: 90ms;
   animation-delay: 90ms;
  }
  
  .mi-slider ul.mi-moveToLeft li:nth-child(3),
  .mi-slider ul.mi-moveFromRight li:nth-child(3),
  .mi-slider ul.mi-moveToRight li:nth-child(2),
  .mi-slider ul.mi-moveFromLeft li:nth-child(2) {
   -webkit-animation-delay: 180ms;
   animation-delay: 180ms;
  }
  
  .mi-slider ul.mi-moveToLeft li:nth-child(4),
  .mi-slider ul.mi-moveFromRight li:nth-child(4),
  .mi-slider ul.mi-moveToRight li:first-child,
  .mi-slider ul.mi-moveFromLeft li:first-child  {
   -webkit-animation-delay: 270ms;
   animation-delay: 270ms;
  }
  
  /* Animations */
  
  @-webkit-keyframes moveFromRight {
   0% { -webkit-transform: translateX(600%); }
   100% { -webkit-transform: translateX(0%); }
  }
  
  @-webkit-keyframes moveFromLeft {
   0% { -webkit-transform: translateX(-600%); }
   100% { -webkit-transform: translateX(0%); }
  }
  
  @-webkit-keyframes moveToRight {
   0% { -webkit-transform: translateX(0%); }
   100% { -webkit-transform: translateX(600%); }
  }
  
  @-webkit-keyframes moveToLeft {
   0% { -webkit-transform: translateX(0%); }
   100% { -webkit-transform: translateX(-600%); }
  }
  
  @keyframes moveFromRight {
   0% { -webkit-transform: translateX(600%); transform: translateX(600%); }
   100% { -webkit-transform: translateX(0); transform: translateX(0); }
  }
  
  @keyframes moveFromLeft {
   0% { -webkit-transform: translateX(-600%); transform: translateX(-600%); }
   100% { -webkit-transform: translateX(0); transform: translateX(0); }
  }
  
  @keyframes moveToRight {
   0% { -webkit-transform: translateX(0%); transform: translateX(0%); }
   100% { -webkit-transform: translateX(600%); transform: translateX(600%); }
  }
  
  @keyframes moveToLeft {
   0% { -webkit-transform: translateX(0%); transform: translateX(0%); }
   100% { -webkit-transform: translateX(-600%); transform: translateX(-600%); }
  }
  
  .mi-slider {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
  }
  
  /* Media Queries */
  @media screen and (max-width: 910px){
   .mi-slider nav {
    max-width: 90%;
   }
   .mi-slider nav a {
    font-size: 12px;
    padding: 40px 10px 30px 14px;
   }
  }
  
  @media screen and (max-width: 740px){
   .mi-slider {
    height: 300px;
   }
   .mi-slider nav {
    top: 220px;
   }
  }
  
  @media screen and (max-width: 490px){ 
   .mi-slider {
    text-align: center;
    height: auto;
   }
  
   .mi-slider ul {
    position: relative;
    display: inline;
    bottom: auto;
    pointer-events: auto;
   }
  
   .mi-slider ul li {
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
    padding: 10px 3px;
    min-width: 140px;
   }
  
   .mi-slider nav {
    display: none;
   }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I am trying to do, is to remove the following code from the <code>demo.css</code> file and apply it to the specific elements which will need it, instead of applying it to everything. Leaving this code is having some effects on the display of my website, but when I remove it, it also affects the sliding items:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*,
  *:after,
  *:before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that, I do not know the elements which are using that code and why it is having some effects on the sliding items.</p>
  
  <p>Please let me know how I can solve this problem.</p>