Triangle Section divider

Hi There,
Fantastic Theme, been using for years bought 10s of licences so far.

I am working on a website now that need to have a Triangle divider to the top banner. I ahve found a CSS and HTML code online to achieve the effect but when I added it as a Code section it doesnt fill the whole width of the page as it only covers the width of the assigned content section not full sceeen width. I guess I need to assign the style to the colour section it self. I tired that bit is didn’t work.

The code I used is :
=========================================================
html: (I added in a code clock inside the colour section:

<section id=”section1″>
<svg width=”100%” height=”100″ viewBox=”0 0 100 102″ preserveAspectRatio=”none”>
<path d=”M0 0 L50 90 L100 0 V100 H0″ fill=”#ffffff” />
</svg>
</section>

CSS: (Added in the quick css section):

#section1{
position:relative;
background:url(‘http://i.imgur.com/k8BtMvj.jpg&#8217;);
background-size:cover;
height:200px;
}
svg{
position:absolute;
bottom:-10px; left:0;
width:100%; height:100px;
display:block;
}

=======================================================
The code works but not filling the whole screen width. Please help and let me know where I need to add my codes so they work correctly and achieve the look intended.
It is a shame that enfold only offers the diagonal effect seperator while other Themes offer different options.
Below are my logins to show what I mean. It is under a test server as we are still building and will add Theme Key onces done.
Looking forward to your reply.
Emmy