Flex not working even after adding -webkit- prefixes

Question

I am trying to display my static webpage same across all the browsers but I am having trouble with Safari as it's not displaying the page just as in Chrome.

I used autoprefixer and changed my code for e.g.: display: -webkit-box;, but still there are problems stacking up things.

Styles.css:

body {
  font-family: Arial, Helvetica, sans-serif;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.left {
  -webkit-flex: 25%;
  padding: 15px 0;
  height: 700px;
}

.left h1 {
  padding-left: 15px;
}

.right {
  -webkit-flex: 75%;
  padding: 15px;
}

#Search {
  width: 100%;
  font-size: 13px;
  padding: 20px;
  border: 1px solid #ddd;
}

#Menu li p {
  background-color: default;
  padding: 12px;
  text-decoration: none;
  font-size: 20px;
  color: black;
  display: block;
  font-family: comic sans-serif;
}

#Menu li p:hover {
  background-color: #eee;
}

Index.html:

<div class="row">
  <div class="left" style="background-color:steelblue;">
    <h1>Locations</h1>
    <input type="text" id="Search" placeholder="Search.." title="Type in a 
    category" data-bind="textInput:userInput">
    <ul id="Menu" data-bind="foreach: filteredLocation">
      <li>
        <p><span data-bind="text: title, click: popup"></span></p>
      </li>
    </ul>
  </div>
  <div class="right" id="map" style="background-color:#ddd;">
  </div>
</div>