title: Making vertical separator css
body: <p>I need help with making double vertical lines.</p>
  
  <p><img src="https://i.stack.imgur.com/GpNZc.png" alt="Problem"></p>
  
  <p>Here are styles:</p>
  
  <pre><code>.slide-container
  {
      text-align: center;
      width: 25%;
  }
  
  .v-separator
  {
      content: "";
      display: inline-block;
      width: 0px;
      height: 230px;
      border-right: 1px solid #fafafa;
      border-left: 1px solid #b4b4b4;
      padding: 0;
      position: relative;
      top: 20px;
  }
  </code></pre>
  
  <p><code>.v-separator</code> has width 2px because of border and this causes the problem. I have tried to make <code>.slide-container</code> width a bit less than 25% (like 23.853%), but this is not the decision.</p>
  
  <p>I have no idea how to implement this feature somehow else.</p>
  
  <p>Btw I am using Foundation 5 and Compass.</p>
  
  <p>fiddle which demonstrates the problem: <a href="http://jsfiddle.net/5w7Hr/" rel="noreferrer">http://jsfiddle.net/5w7Hr/</a></p>