title: Header not centered vertically on safari
body: <p>On chrome my website works like it should, but opening the same site on safari, the first header is not vertically centered.
  Any suggestions to why that is? </p>
  
  <p>I know a way to overcome this, is to use padding top, but I prefer another solution. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*body*/
  html, body {
   font-size: 100%;
   height: 100%;
   font-family: 'Lato', sans-serif;
   font-weight: 200;
  }
  
  /*nav*/
  .navbar {
   background: #fff;
   border-bottom: solid #6ed3cf 2px;
   margin: 0;
  
   /*Kun on scroll!!!
   -moz-box-shadow:    0 2px 0 0 #6ed3cf;
      -webkit-box-shadow: 0 2px 0 0 #6ed3cf;
      box-shadow:         0 2px 0 0 #6ed3cf;
      */
  }
  
  
  .navbar p {
   color: black;
   font-weight: 500;
  }
  
  .container-fluid {
   padding-left: 25px;
   padding-right: 25px;
  }
  
  .navbar-default .navbar-nav&gt;li&gt;a {
   color: black;
  }
  
  .navbar-default .navbar-nav&gt;li {
   border-bottom: solid transparent 2px;
  }
  
  .navbar-default .navbar-nav&gt;li&gt;a:hover {
   color: #6ed3cf;
  }
  
  /*
  .navbar-default .navbar-nav&gt;li&gt;a:active {
   color: #6ed3cf;
  }
  */
  
  .navbar-default .navbar-toggle .icon-bar {
   background: black;
   -webkit-transition: width .8s, height .8s, -webkit-transform .8s; /* Safari */
      transition: width .8s, height .8s, transform .8s;
  }
  
  
  
  .navbar-default .navbar-toggle {
   border: none;
   background: transparent;
  }
  
  .navbar-default .navbar-toggle:hover {
   background: transparent;
  }
  
  .navbar-default .navbar-toggle:visited {
   background: transparent;
  }
  
  .navbar-default .navbar-toggle .icon-bar {
   width: 22px;
   transition: all 0.2s;
  }
  
  .navbar-default .navbar-toggle .top-bar {
   transform: rotate(45deg);
      transform-origin: 10% 10%;
  }
  
   .navbar-default .navbar-toggle .middle-bar {
      opacity: 0;
    }
  
    .navbar-default .navbar-toggle .bottom-bar {
      transform: rotate(-45deg);
      transform-origin: 10% 90%;
    }
  
    .navbar-toggle.collapsed .top-bar {
     transform: rotate(0);
    }
  
     .navbar-toggle.collapsed .middle-bar {
      opacity: 1;
    }
  
    .navbar-toggle.collapsed .bottom-bar {
      transform: rotate(0);
    }
  
    #topper {
     outline: none;
    }
  
  /*Header*/
  .header {
   /*/Users/jonashansen/Desktop/hjemmeside/img*/
   background: url(/img/arg.jpg) no-repeat center center;
   background-size: cover;
   background-attachment: fixed;
   position: relative;
   box-shadow: inset 0 0 0 1000px rgba(60, 195, 191, 0.7);
   min-height: 100%;
   display:flex;
     justify-content:space-between;
     align-items: center;
  }
  
  #rowheader h1 {
   font-weight: 200;
   text-align: center;
   color: #fff;
   font-size: 3em;
  }
  
  #rowheader h2 {
   font-weight: 200;
   text-align: center;
   color: #fff;
   font-size: 2em;
  }
  /*
  #rowheader h1 {
   font-family: 'Lato', sans-serif;
   font-size: 3em;
  
  
  }
  */
  
  /*Section1*/
  #section1 {
   text-align: center; 
   margin-top: 3em;
   margin-bottom: -4em; 
   height: auto;
   position: relative;
  }
  
  .anchor {
   display: block;
   height: 3em;
   visibility: hidden; 
  }
  
  #section1 h2 {
   font-size: 2em;
   font-weight: 200;
   text-align: center;
   padding: 0 2.5em 0.5em;
   display: block;
  }
  
  #section1 h3 {
   font-weight: 200;
  }
  
  #section1 p {
   line-height: 2em;
   padding: 1em 0 0;
  }
  
  #section1 a {
   color: #3DD0AC;
   text-decoration: none;
  }
  
  #section1 a:hover {
   color: black;
  }
  
  /*Section2*/
  #section2 {
   line-height: 1.8em;
   height: auto;
   margin-top: 2em;
   margin-bottom: 2em;
   position: relative;
  }
  
  #section2 h2 {
   font-size: 2em;
   font-weight: 200;
   text-align: center;
   padding: 0 2.5em 0.5em;
   display: block;
  }
  
  #section2 h3 {
   font-weight: 200;
  }
  
  #section2 p {
   padding: 0 0 0.5em;
   padding-bottom: 2em; 
  }
  
  #section2 a {
   color: #3DD0AC;
   text-decoration: none;
  }
  
  #section2 img {
   width: 100%;
      height: 100%;
  }
  
  #img-wrapper {
   display: inline-block;
   overflow: hidden;
  }
  
  #img-wrapper img {
   -webkit-transition: all .4s ease;
      -moz-transition: all .4s ease;
      -ms-transition: all .4s ease;
      -o-transition: all .4s ease;
      transition: all .4s ease;
  }
  
  #img-wrapper img:hover {
   -webkit-transform:scale(1.1); /* Safari and Chrome */
      -moz-transform:scale(1.1); /* Firefox */
      -ms-transform:scale(1.1); /* IE 9 */
      -o-transform:scale(1.1); /* Opera */
      transform:scale(1.1);
  }
  
  /*Section3*/
  #section3 {
   height: 50%;
   background: #6ed3cf;
   text-align: center;
   padding: 0 0 0.5em;
   height: 20em;
  }
  
  #section3 h2 {
   font-size: 2em;
   font-weight: 200;
  }
  
  #section3 i {
   padding: 0.5em;
   color: black;
  }
  
  /*Footer*/
  #footer {
   background:#fff;
   color: black;
   height: 6%;
   width: 100%;
   display: table;
  }
  
  #footer a {
   font-size: 0.8em;
     text-align: center;
     vertical-align: top;
     display: none;
     padding-top: 1.2em;
     color: black;
     font-weight: 500;
     text-decoration: none;
  }
  
  #footer p {
    font-size: 0.7em;
    text-align: center;
    vertical-align: bottom;
    display: table-cell;
    padding-bottom: 1.2em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Jonas Suonpera Hansen - Web developer&lt;/title&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;  
  &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;             
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"&gt;
  &lt;link rel="stylesheet" href="img/font-awesome/css/font-awesome.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="CSS/main.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="CSS/@media.css"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar top-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar middle-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar bottom-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" id="topper" href="#"&gt;&lt;p&gt;&amp;lt;&amp;frasl;BY&amp;#95;SUONPERA&amp;gt;&lt;/p&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a data-toggle="collapse" data-target=".navbar-collapse" href="#About"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="collapse" data-target=".navbar-collapse" href="#My_Work"&gt;My Work&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="collapse" data-target=".navbar-collapse" href="#Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  
  &lt;!-- Header --&gt;
   &lt;div class="header"&gt;
    &lt;div class="container" style="display:flex;justify-content:center;align-items:center;"&gt;
     &lt;div id="rowheader"&gt;
      &lt;h1&gt;JONAS SUONPERA&lt;/h1&gt;
      &lt;h2&gt;Web Developer&lt;/h2&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
  &lt;!-- Section1 --&gt;
   &lt;div id="section1" class="container"&gt;
   &lt;span class="anchor" id="About"&gt;&lt;/span&gt;
    &lt;h2&gt;About&lt;/h2&gt;
    &lt;div class="row"&gt;
     &lt;div class="col-md-6 col-md-offset-3"&gt;
      &lt;h3&gt;Me&lt;/h3&gt;
      &lt;p&gt;blablablablablablablablablabalbalbal&lt;/p&gt;
      &lt;p&gt;Check out my &lt;a href="#"&gt;Linkedin&lt;/a&gt;, or &lt;a href="/docs/Resume.pdf" download="Resume"&gt;download my resume&lt;/a&gt; if you want to know more.&lt;/p&gt;&lt;br&gt;&lt;br&gt; 
     &lt;/div&gt;
    &lt;/div&gt;   
   &lt;/div&gt;
  
  
  
  &lt;!-- Section2 --&gt;
   &lt;div  id="section2" class="container"&gt;
   &lt;span class="anchor" id="My_Work"&gt;&lt;/span&gt;
    &lt;h2&gt;My Work&lt;/h2&gt;
    &lt;div class="row"&gt;
     &lt;div class="col-md-6 col-md-offset-3"&gt;
      &lt;div id="img-wrapper"&gt;
       &lt;a href="#"&gt;&lt;img src="/img/photographer.jpg"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;h3&gt;Photographer's Portfolio&lt;/h3&gt;
      &lt;p&gt;blablablablabla&lt;a href="#"&gt;Go check it out!&lt;/a&gt;&lt;/p&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
  &lt;!-- Section3 --&gt; &lt;!-- Brug scss til at vertical align text. Se her http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ --&gt;
   &lt;div id="section3" style="display:flex;justify-content:center;align-items:center;"&gt;
    &lt;div&gt;
    &lt;span class="anchor" id="Contact"&gt;&lt;/span&gt;
     &lt;h2&gt;Want to get in touch?&lt;/h2&gt; 
     &lt;div class="container"&gt;
      &lt;div class="row"&gt;
       &lt;div class="col-md-6 col-md-offset-3"&gt;
        &lt;p&gt;blablablabla&lt;/p&gt;
        &lt;a href="#"&gt;&lt;i class="fa fa-envelope fa-2x" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt; 
        &lt;a href="#"&gt;&lt;i class="fa fa-linkedin-square fa-2x" aria-hidden="true"&gt;&lt;/i   &gt;&lt;/a&gt;  
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
  
  &lt;!-- Footer --&gt;
   &lt;div id="footer"&gt;
    &lt;a id="topper" href="#topper"&gt;BACK TO TOP&lt;/a&gt;
    &lt;p&gt;Copyright &amp;copy; 2016 Jonas &lt;/p&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>