CSS - overriding skeleton grid rules for specific elements

I'm styling a site using skeleton grid & reset css.I've had an ongoing issue with some rules in a container which I now know relates to skeleton. I have an image at the top of each page of the site with a small section at the foot of each image with some text and an icon at either end which I can't seem to get positioned properly. This is how it is suppossed to look -

This is my coded version -

(background images are different & agency/business image still to be added)

On my coded version I cannot get the text & icons in the bottom strip to properly position towards to the edges of the page. I've tried rebuilding the pages, first without reset.css and then without skeleton and without skeleton they move to the edges. However, I'd prefer to keep the skeleton grid as I'm using it to position most of the other elements/sections on the site. How do I disable/override the skeleton rules for this particular part? Here's my code as it stands -

HTML

<section id="home">

        <a href="agency.html">Are you an agency?</a>
        <a href="business.html">Or a business?</a>

        <div class="container showreel">
            <div class="seemore">
                <span class="fa-stack fa-lg">
                    <i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
                    <i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i>
                </span>
                <p>SEE MORE</p>
            </div>
            <div class="seeour">
                <p>SEE OUR SHOWREEL</p>
                <i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
            </div>
        </div>
    </section>

CSS

body {
  width: 960px;
  margin: 0 auto 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.container {
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
}

/* HOME PAGE */

section#home {

    height: 400px;
    max-width: 100%;
    background: url(../images/homepagemain.jpg) center center no-repeat;
    background-size: 960px;
    background-position: center;
    overflow: hidden;

    position: relative;
}



.showreel {
  height: 50px;
  width: 960px;
  position: absolute;
  background-color: black;
  bottom: 0;
  padding: 0 30px;
  justify-content: space-between;
}

.showreel, .showreel > div {
  display: flex;
  align-items: center;
}

.showreel p {
  font-size: 15px;
  font-weight: normal;
  margin: 0;
  color: #ffffff;
}

.showreel i {
  color: #ffffff;
}

.seemore i {
  margin-right: 30px;
}

.seeour i {
  margin-left: 30px;
}

Just add below css part

Change this

.showreel, .showreel > div {
  display: flex;
  align-items: center;
}

To this

.showreel, .showreel > div.seemore {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex:1;
}
.showreel, .showreel > div.seeour {
    justify-content: flex-end;
    flex:1;
    display: flex;
    align-items: center;
}

Working fiddle

fiddle link