Jak poprawnie ustawić menu?

pytanie zadane 17 stycznia 2020 w HTML i CSS przez must Bywalec (2,980 p.)

Cześć. Chciałbym aby moje menu na rozdzielczość iphone 6/7/8 plus wyglądało tak:

Niestety aktualnie wygląda tak nie wiedzieć czemu:

Mógłby mi ktoś powiedzieć co robie źle?

*
{
  margin: 0;
  padding: 0;
}

header
{
  width: 1920;
  height: 1080px;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
  height: 980px;
  width: auto;
  background-image:  linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}

footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
}

footer img{
  margin-top: 5px;
  height: 30px;
  display: inline-block;
  padding: 0px 10px 0px 0px;
}

.main-nav
{
  float: right;
  color: #000000;
  margin-top: 40px;
  margin-right: 0px;
}

.main-nav li
{
  display: inline-block;
}

.main-nav li a
{
  color: #000000;
  text-decoration: none;
  font: Bold 25px/15px Arial;
  padding: 5px;
}

#logo
{
  margin-top: 10px;
  float: left;
}

#sign a
{
  background-color: #DCDFDE;
  padding: 30px 15px 17px 15px;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  border-left: 3px solid black;
  border-right: 3px solid black;
}

.....

@media only screen and (max-device-width: 500px){
  body {
    background-image:  linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 60%);
    background-size:100% 3000px;
  }
  .main-nav
  {
    width: 1100px;
    float: right;
    color: #000000;
    margin-top: 40px;
    margin-right: 20px;
  }

  .main-nav li a
  {
    color: #000000;
    text-decoration: none;
    font: Bold 51px/15px Arial;
    padding: 5px;
  }

  .main-nav li
  {
  display: inline-block;
  }

  #logo img
  {
    margin-left: 350px;
    text-align: center;
    width: 850px;
  }

.....
}

html

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>DingDog</title>
  <link rel="stylesheet" href="css-images/style-friends.css" >
</head>

<body>
  <header>
    <div class="row">
      <ul id ="logo"> <img src="css-images/dingdog-logo.png"> </ul>

      <ul class="main-nav">
        <li style="padding-left:10px"><a href="profile.html">PROFILE</a></li>
        <li style="padding-left:10px"><a href="">MAP</a></li>
        <li style="padding-left:10px"><a href="">YOUR FRIENDS</a></li>
        <li style="padding-left:10px"><a href="">MAILBOX</a></li>
        <li style="padding-left:10px" id ="sign"><a href="index.html">LOG OUT</a></li>
      </ul>
    </div>

    <section>
      <article>
        <p id="profilesign">Your friends</p>
        <h1 id="avatar">Available:</h1>
        <img class="left" src="css-images/signupdog.jpg" style='position:absolute;left:0px; top:0px;' />
        <span class="dot" style='position:absolute;left:0px; top:0px;''></span>
        <h1 id="Edytuj">Name</h1>
        <img class='left2' src='css-images/signupdog.jpg' style='position:absolute;left:0px; top:0px;' />
<span class="dot2" style='position:absolute;left:0px; top:0px;''></span>
        <h1 id='Edytuj2' style='position:absolute;left:0px; top:0px;''>Name</h1>
        <img class="left3" src="css-images/signupdog.jpg" style='position:absolute;left:0px; top:0px;' />
<span class='dot3' style='position:absolute;left:0px; top:0px;''></span>
        <h1 id="Edytuj3" style='position:absolute;left:0px; top:0px;''>Name</h1>
        <h1 id='about'>Not available:</h1>
        <img class='left4' src="css-images/signupdog.jpg" style='position:absolute;left:0px; top:0px;' />
<span class="dot4" style='position:absolute;left:0px; top:0px;''></span>
        <h1 id="Edytuj4" style='position:absolute;left:0px; top:0px;'''>Name</h1>
      </article>
    </section>
  </header>
  <footer>
    <img src="social/instagram.png" />
    <img src="social/twitter-white-logo.png" />
    <img src="social/facebook.png" />
  </footer>
</body>
</html>