Client seeing different version of page. Issues with Centering

I’m having a few issues with a site I’m working on for a client which launched today. On my machine and my iphone everythings looks to spec, but on their machines they’re seeing many issues.

there machine

my machine

there machine

my machine

I’ve tried clearing my browser cache, and I don’t have any caching plugins on the wordpress so I’m not sure why I don’t see the issues she is having. We’re both using safari on macs as well.

It seems like there is an issue with centering. Can anyone figure out what’s going on? I’m in a bit of a bind.

Heres the landing page

<div class="homepagewrap" id="portbgimage1" style="background-image: url('<?    php the_field('MC_homepagebackground'); ?>');">
    <div class="borderin">
        <div class="logohome">
            <a href="<?php bloginfo('url');?>/portfolio/"><img src="<?php     the_field('homepage_logo'); ?>"></a>
        </div>
    </div>
    </div>
<div class="customfooter">
617-227-5343  ∙  <a     href="mailto:info@mcarterandco.com">info@mcarterandco.com</a>
</div>

and css

.homepagewrap{
background-attachment: fixed;
background-size: cover;
position: relative;

height:100vh;
box-sizing: border-box;
border: 20px solid rgba(0,0,0,0);
}


.logohome{
box-sizing: border-box;
padding: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logohome img{
max-width: 80%;
margin-left: 10%;
}

the second page

<div class="portwrap" id="portwrap1">
<div class="portwrapchild" id="portwrapchild1">
<a href="<?php bloginfo('url');?>/newclassic/"><span class="porttitles"     id="porttitles1">The New Classic</span></a>
</div>
<div class="portbgimage" id="portbgimage1" style="background-image: url('<?php     the_field('portupload1'); ?>');"></div>
</div>

<div class="portwrap" id="portwrap2">
<div class="portwrapchild" id="portwrapchild2">
<a href="<?php bloginfo('url');?>/artful-mix/"><span class="porttitles"     id="porttitles2">The Artful Mix</span></a>
</div>
<div class="portbgimage" id="portbgimage2" style="background-image: url('<?php     the_field('portupload2'); ?>');"></div>
</div>

<div class="portwrap" id="portwrap3">
<div class="portwrapchild" id="portwrapchild3">
<a href="<?php bloginfo('url');?>/historic-home/"><span class="porttitles"     id="porttitles3">The Historic Home</span></a>
</div>
<div class="portbgimage" id="portbgimage3" style="background-image: url('<?php     the_field('portupload3'); ?>');"></div>
</div>

<div class="portwrap" id="portwrap4">
<div class="portwrapchild" id="portwrapchild4">
<a href="<?php bloginfo('url');?>/escape/"><span class="porttitles"     id="porttitles4">The Escape</span></a>
</div>
<div class="portbgimage" id="portbgimage4" style="background-image: url('<?php     the_field('portupload4'); ?>');"></div>

and accompanying css

.portwrap{
position: relative;
float: left;
width: 50%;
height: 50%;
background-size: cover;
}

.portbgimage{
width:100%;
height:100%;
}

#portwrap1{
border-top: 20px solid #E0E0E0;
border-right: 10px solid #E0E0E0;
border-bottom: 10px solid #E0E0E0;
border-left: 20px solid #E0E0E0;
box-sizing: border-box;
}
#portwrap2{
border-top: 20px  solid #E0E0E0;
border-right: 20px solid #E0E0E0;
border-bottom: 10px solid #E0E0E0;
border-left: 10px solid #E0E0E0;
box-sizing: border-box;
}

#portwrap3{
border-top: 10px solid #E0E0E0;
border-right: 10px solid #E0E0E0;
border-bottom: 20px solid #E0E0E0;
border-left: 20px solid #E0E0E0;
box-sizing: border-box;
}

#portwrap4{
border-top: 10px solid #E0E0E0;
border-right: 20px solid #E0E0E0;
border-bottom: 20px solid #E0E0E0;
border-left: 10px solid #E0E0E0;
box-sizing: border-box;
}


.portwrapchild {
/*overflow: hidden;*/
z-index:99;
text-align: center;
font-family: 'Crimson Text', serif;
font-style: italic;
font-weight: 200;
font-size: 3.5em;
color: #E0E0E0;
width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}