title: Negative css line not scaling correctly with a 100% svg image
body: <p>Hope I can explain this correctly.</p>
  
  <p>Please see the attached fiddle for an example: <a href="http://jsfiddle.net/Ldd70cnd/" rel="nofollow noreferrer">http://jsfiddle.net/Ldd70cnd/</a></p>
  
  <p>Basically, I have an svg image that will be 100% width, I then want to add 2 coloured lines, 1 above and 1 below but I want the lines to be within the svg's boundary, see images.</p>
  
  <p><img src="https://i.stack.imgur.com/wHrR6.png" alt="Fist image">
  The above example shows the lines on the very edge of the svg image.</p>
  
  <p><img src="https://i.stack.imgur.com/hDPDk.png" alt="Second image"></p>
  
  <p>The above example shows you where I want the lines, my jsfiddle has got the top line working fine, the bottom line doesn't stay in line if you resize the browser.</p>
  
  <p>Can anyone help?</p>
  
  <p>Here's the css i've used.</p>
  
  <pre><code>.logo-top-line { 
      height:2px; 
      width:100%; 
      background : rgb(88, 168, 144);
      margin-top:3%;
  }
  img {
      width: 100%;
      margin-top:-2.6%;
  }
  .logo-bottom-line { 
      height:2px; 
      width:100%; 
      background : rgb(88, 168, 144);
      margin-top:-1em;
  }
  </code></pre>