Why does my website looks different in chrome and firefox than it does in Safari using flexbox?
<p>I am new to HTML and CSS and have very basic knowledge of both. I am creating a test website and used a tutorial from Treehouse for part of it. I wanted to use flexbox for the layout. I have created the website, and it looks like I want it to on a smartphone, it's one single column, but when it moves to an iPad screen I want the columns at the bottom to become 2 columns, and on a desktop or mbpro screen I would like all 3 columns to show up.</p>

<p>In chrome and firefox, my website looks exactly how I want it to. However in Safari the website does not look right. The banner in blue is offset to the left on a desktop, and the columns at the bottom are in 3, but are way disproportionate. The first column is huge, and the last two are very slim.</p>

<p>I was hoping someone would be able to help me look in the right direction. I have been learning HTML and CSS for a couple of weeks and am not close to proficient. I just learned about flexbox for first time this past weekend. I would like the final page to be a single column on smartphones. then on iPad, I would like the menu at the top to be in a single column row and the company name and hours etc in the blue ribbon to be centered. And then the bottom column is split into 2, and 1 on the bottom. Then on an iPad Pro, or desktop screen I would like the same as iPad, except the final column splits into 3 equal spaces. </p>

<p>As I have stated, at this time my chrome and firefox is doing exactly what I want, only Safari is not working right.</p>

<p><a href="http://i.stack.imgur.com/bvVjo.jpg" rel="nofollow">Correct page</a></p>

<p><a href="http://i.stack.imgur.com/zKe7m.jpg" rel="nofollow">Incorrect page using Safari</a></p>

<p>Below is the HTML</p>

<pre><code>    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;                  &lt;title&gt;Name of Company&lt;/title&gt;
&lt;link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'&gt;

&lt;link rel="stylesheet" href="css/normalize.css"&gt;
&lt;link rel="stylesheet" href="css/oilChangeStyles.css"&gt;

&lt;div id="fb-root"&gt;
        &lt;script&gt;(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
          fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));
        &lt;/script&gt;
&lt;/div&gt;

&lt;/head&gt;
   &lt;body&gt;


&lt;header class="main-header"&gt;
    &lt;h1 class="name"&gt;&lt;a href="#"&gt;Name of business&lt;/a&gt;&lt;/h1&gt;
        &lt;ul class="main-nav"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Oil changes&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Trans flush&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Trans tune ups&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Coolant Services&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;4x4 services&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Air filters&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;&lt;!-- .main-nav --&gt;


&lt;/header&gt;&lt;!-- .main-header --&gt;   

&lt;div class="banner"&gt;
    &lt;div class="left-side col"&gt;
        &lt;a href="tel:800-800-8000"&gt;(800) 800-8000&lt;/a&gt;&lt;br /&gt;
        &lt;a href="https://google.com"  target="_blank"&gt;1000 West Columbia Blvd&lt;br /&gt;
                                                                            Ste 100&lt;br /&gt;
                                                                Dearborn&lt;br /&gt; MI 45885&lt;/a&gt;
    &lt;/div&gt;&lt;!-- .left-side --&gt;   
        &lt;div class="center col"&gt;
            &lt;h1 class="headline"&gt;Company name&lt;/h1&gt;
            &lt;span class="tagline"&gt;"Your one stop shop for all your auto needs."&lt;/span&gt;&lt;br /&gt;
        &lt;/div&gt;&lt;!-- center col --&gt;
    &lt;div class="right-side col"&gt;            
            Mon 8:30 am - 6:30 pm&lt;br /&gt; 
            Tue 8:30 am - 6:30 pm&lt;br /&gt;     
            Wed 8:30 am - 6:30 pm&lt;br /&gt;     
            Thu 8:30 am - 6:30 pm&lt;br /&gt;     
            Fri 8:30 am - 6:30 pm&lt;br /&gt;     
            Sat 8:30 am - 5:00 pm&lt;br /&gt;     
            Sun Closed&lt;br /&gt;    
    &lt;/div&gt;&lt;!-- right-side col --&gt;
&lt;/div&gt;&lt;!--/.banner--&gt;

&lt;div class="pictures"&gt;
    &lt;img class="item-1" src="img/frontOfBusiness.png" alt="Front of Business"&gt;
    &lt;img class="item-2" src="img/logo.png" alt="Logo"&gt;
    &lt;!-- &lt;img class="item-3" src="img/interiorBay.png" alt="The interior bay"&gt;   --&gt;
&lt;/div&gt;&lt;!-- .pictures --&gt;


&lt;div class="row"&gt;   



    &lt;div class="primary col"&gt;
        &lt;h2&gt;Welcome!&lt;/h2&gt;


        &lt;p&gt;At Company name we pride ourselves in customer service and are always willing to go the extra mile to make our customers happy. Drop-ins are always welcome for our wide variety of auto care services. Stop in anytime and talk to our friendly techs about the top notch servicing we provide at a great price. Here at the 1 stop, EVERY SINGLE customer is valued and important to us.
</code></pre>

<p>.</p></p>

<pre><code>&lt;/div&gt;&lt;!--/.primary col--&gt;
           &lt;div class="secondary col"&gt;


  &lt;h3&gt;We offer:&lt;/h3&gt;
            &lt;ul&gt;
                &lt;li&gt;10 Minute Oil Changes&lt;/li&gt;
                &lt;li&gt;Transmission Services&lt;/li&gt;
                &lt;li&gt;Coolant Services&lt;/li&gt;
                &lt;li&gt;4x4 Servicing&lt;/li&gt;
                &lt;li&gt;Power Steering Servicing&lt;/li&gt;
                &lt;li&gt;Replacement of Air Filters, Wiper Blades &amp; Light Bulbs&lt;/li&gt;
                &lt;li&gt;Additive Services&lt;/li&gt;
            &lt;/ul&gt;   
    &lt;/div&gt;&lt;!-- end .secondary col --&gt;
    &lt;div class="third col"&gt;
            &lt;h3&gt;Our specials include:&lt;/h3&gt;
            &lt;ul&gt;
                &lt;li&gt;Everyday $19.95 oil change (up to 5qts, 5-30 and 10-30 weight only, standard canister oil filters only internals have fees)&lt;/li&gt;
                &lt;li&gt;$69.95-$89.95 Transmission Service - beats any competitors price! &lt;/li&gt;
                &lt;li&gt;$5 off any Valvoline Maxlife change&lt;/li&gt;
                &lt;li&gt;$10 off any Valvoline Syn power change&lt;/li&gt;
                &lt;li&gt;Multi-Service layered discounts, so the more services you combine, the more you save!&lt;/li&gt;
            &lt;/ul&gt;   
        &lt;/div&gt;&lt;!-- end .third col--&gt;
&lt;/div&gt;&lt;!-- end .row --&gt;

&lt;footer class="main-footer"&gt;

&lt;div class="fb-like" data-href="https://www.facebook.com/pages/Company name" data-width="50px" data-layout="button_count" data-action="like" data-show-faces="true" data-s  hare="true"&gt;&lt;/div&gt;

    &lt;div class="footer-inner"&gt;
        &lt;span&gt;&amp;copy;2016 Oil Change.&lt;/span&gt;
    &lt;/div&gt;
&lt;/footer&gt;
</code></pre>

<p>
</p>

<p>Here is the CSS</p>

<pre><code>/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
}
body {
    font-family: 'Varela Round', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
p {
    font-size: .95em;
}
h2,
h3,
a {
    color: #093a58;
}
h1,
h2,
h3 {
    margin-top: 0;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
    font-size: 1.35em;
    margin: 0;
}
.main-nav {
    margin-top: 5px;
}
.name a,
.main-nav a {
    text-align: center;
    display: block;
    padding: 10px 15px;
}
.main-nav a {
    font-size: .95em;
    color: #243432;
    text-transform: uppercase;
}
.main-nav a:hover {
    color: #91aab6;
}

/* ---- Layout Containers ---- */

.main-header {
    padding-top: .35em;
    padding-bottom: .35em;
}

.banner,
.main-footer {
    text-align: center;
}

.banner {
    color: #fff;
    background: #130897;
    padding: 1em 0;
    margin-bottom: 24px;
}

.col {
    padding-right: 1em;
    padding-left: 1em;
}

.main-footer {
    background: #130897;
    padding: 2em 0;
    margin-top: 30px;
}




/* ---- Page Elements ---- */

.item-1,
.item-2,
.item-3 {
    width: auto;
    margin-top: 8px;
    margin-left: 20px;
    box-shadow: 10px 10px 5px #000;
}
.headline {
    margin-bottom: 0;
}
.feat-img {
    border-radius: 5px;
}

.footer-inner {
    color: #fff;
}

.col h2 {
    margin-top: 20px;
}

.col h3 {
    color: white;
}

.tagline {
    margin-top: 10px;
    font-style: italic;
}


.left-side a {
    color: white;
}

.left-side a:hover {
    color: red;
}


.map {
    float: left;
    margin-left: 150px;
}


.secondary h3,
.third h3 {
    color: black;
}

.secondary ul,
.third ul {
    list-style: disc;
    margin-left: 20px;
    padding-left: 20px;
}

.row {
    padding-top: 30px;
}


.fb-like {
    padding-bottom: 20px;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

      body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      }

    .main-header,
    .row,
    .footer-inner{
        width: 80%;
        margin: 0 auto;
        max-width: 1150px;
    }

    .tagline {
        font-size: 1.4em;
    }


.pictures {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    width: auto;

    }

.row {
  display: flex;
  }

    .main-header,
    .main-nav,
    .banner {
        display: flex;
    }
/*

    .main-header {
        flex-direction: column;
        align-items: center;
    }

    /*
.banner {
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        flex-grow: 1;
    }
*/


    /*
.col {
        flex: 1 100%;
        justify-content: space-between;
    }
*/



}

@media (min-width: 880px) {

    .row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }


    .col {
        flex: 1 50%;
        justify-content: space-between;
    }

@media (min-width: 1025px) {

    .main-header {
        flex-direction: row;
        justify-content: space-between;
    }

    .col {
        flex: 1 33%;
        justify-content: space-between;
    }

}



*/
</code></pre>