Responsive before & after lines
<p>I have a header, and i want lines before and after it. I have already achieved that but they are not currently responsive... So at the moment when i make my screen smaller they go onto new lines etc its horrid. I just want the lines to get smaller as the screen does..</p>

<p>Here's what i have tried so far: </p>

<pre><code>h2:after {
display: inline-block;
margin: 0 0 8px 20px;
height: 3px;
content: "";
text-shadow: none;
background-color: #E0E0E0;
max-width: 100%;
}

h2:before {
display: inline-block;
margin: 0 20px 8px 0;
height: 3px;
content: "";
text-shadow: none;
background-color: #E0E0E0;
max-width: 100%;
}
</code></pre>

<p>As soon as i turn width:100% to max-width my lines just disappear.</p>