Margin different in Windows (Chome, Edge, etc.) and Mac OS (Safari)

Welcome.

I've got a few questions to do with Safari and Windows Browsers (Chrome, Edge, etc.). I wrote this code as shown bellow and the problem is that when I have the margin of the .Content_Container set to 63px then my browsers on my PC present it correctly. When I go onto my macbook and check it in safari then the margin is incorrect by a few pixels. The fix that I found was by putting the padding-top: 63px instead of the Margin-top. Can someone explain why this happens and if there is a work around? I don't want to be using padding-top always.

.body {
    position: absolute;
    overflow-y: scroll;
    padding: 0;
    margin: 0;
    min-width: 100%;
}

.nav-menu {
    width: 100%;
    z-index: 5;
    margin: 0 auto;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    position: fixed;
}

.nav-menu ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    width: 100%;
    text-align: center;
    background-color: dodgerblue;
}

.nav-menu ul li {
    margin: 0 auto;
    padding: 0;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: inline-block;
}

.nav-menu ul li a {
    text-decoration: none;
    margin: 0 auto;
    display: block;
    padding: 0.55em;
    text-align: center;
    color: white;
    font-size: 1.5rem;
    -webkit-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}

.nav-menu ul li a i {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-size: inherit;
    font-weight: inherit;
}

.nav-menu ul li a p {
    margin: 10px auto 0;
    padding: 0;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-weight: inherit;
}

.Content_Container {
    margin: 63px auto 0;
    padding: 0;
}

main {
    margin: 0 auto;
    padding: 0;
}

aside {
    margin: 0 auto;
    padding: 0;
}

main img {
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
}

<div class="body">
  <nav class="nav-menu">
      <ul>
          <li><a href="#" class="current-nav"><p>Homepage</p></a>
          </li><li>
              <a href="#"><p>Item 1</p></a>
          </li><li>
              <a href="#"><p>Item 2</p></a>
          </li><li>
              <a href="#"><p>Item 3</p></a>
          </li>
      </ul>
  </nav>

  <div class="Content_Container">
      <main>
          <img src="https://wallpaperscraft.com/image/city_hong_kong_night_clouds_lights_58330_3840x2160.jpg" alt="" title="" style="opacity: 1;">
      </main>
      <aside>

      </aside>
      <div style="height: 500px;"></div>
  </div>
<div>

Is it because of the ratio?

I have a quick look, sadly I don't have mac, but I know all browser has own framework
Edge/Internet Explorer with prefix -ms-
Firefox with prefix -moz-
Google Chrome with prefix -webkit-
Safari with prefix -webkit-,
Opera with prefix -webkit-

I notice you have wrote some webkit. I have modified it on Autoprefixed CSS. I think it might work on the mac, if not then sorry I can't help more.

.body {
    position: absolute;
    overflow-y: scroll;
    padding: 0;
    margin: 0;
    min-width: 100%;
}

.nav-menu {
    width: 100%;
    z-index: 5;
    margin: 0 auto;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    position: fixed;
}

.nav-menu ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    width: 100%;
    text-align: center;
    background-color: dodgerblue;
}

.nav-menu ul li {
    margin: 0 auto;
    padding: 0;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: inline-block;
}

.nav-menu ul li a {
    text-decoration: none;
    margin: 0 auto;
    display: block;
    padding: 0.55em;
    text-align: center;
    color: white;
    font-size: 1.5rem;
    -webkit-transition: background 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}

.nav-menu ul li a i {
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-size: inherit;
    font-weight: inherit;
}

.nav-menu ul li a p {
    margin: 10px auto 0;
    padding: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-weight: inherit;
}

.Content_Container {
    margin: 63px auto 0;
    padding: 0;
}

main {
    margin: 0 auto;
    padding: 0;
}

aside {
    margin: 0 auto;
    padding: 0;
}

main img {
    margin: 0 auto;
    padding: 0;
    max-width: 100%
}