Q:

Vertical positioning of divs is wrong

I am trying to make a portfolio and this is the code that is the same without the content:

$(document).ready(function() {
  $('.nav-link').on('click', function() {
    if ($(window).width() < 768) {
      let section = $(".section#" + $(this).attr('id')).offset();
      let scrollTop = $('#main-container').scrollTop() + section.top
      $('#main-container').animate({
        scrollTop: scrollTop
      }, 500);
    } else {
      let section = $(".section#" + $(this).attr('id')).offset();
      let scrollLeft = $('#main-container').scrollLeft() + section.left
      console.log(scrollLeft);
      $('#main-container').animate({
        scrollLeft: scrollLeft
      }, 500);
    }
  });



  $(".container").scroll(function() {
    if ($(window).width() < 768) {
      let container = $(".container");
      let container_height = container.height();
      let pageSplit = 1 / $('.section').length

      let profile_height = container_height * pageSplit;
      let projects_height = container_height * pageSplit * 2;
      let contact_height = container_height * pageSplit * 3;
      if ($('.container').scrollTop() > contact_height + 20) {
        $('.nav-link').removeClass('active');
        $('.nav-link#contact').addClass('active');
      } else if ($('.container').scrollTop() > profile_height && $('.container').scrollTop() < contact_height + 20) {
        $('.nav-link').removeClass('active');
        $('.nav-link#projects').addClass('active');
      } else if ($('.container').scrollTop() < profile_height) {
        $('.nav-link').removeClass('active');
        $('.nav-link#profile').addClass('active');
      }
    } else {
      let container = $(".container");
      let container_width = container.width();
      let pageSplit = 1 / $('.section').length

      let profile_width = container_width * pageSplit;
      let projects_width = container_width * pageSplit * 2;
      let contact_width = container_width * pageSplit * 3;

      console.log($('.container').scrollLeft());
      console.log(projects_width);

      if ($('.container').scrollLeft() > contact_width + 20) {
        $('.nav-link').removeClass('active');
        $('.nav-link#contact').addClass('active');
      } else if ($('.container').scrollLeft() > profile_width && $('.container').scrollLeft() < contact_width + 20) {
        $('.nav-link').removeClass('active');
        $('.nav-link#projects').addClass('active');
      } else if ($('.container').scrollLeft() < profile_width) {
        $('.nav-link').removeClass('active');
        $('.nav-link#profile').addClass('active');

      }
    }
  });
});

function scrollHorizontally(e) {
  e = window.event || e;
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  document.getElementById('main-container').scrollLeft -= (delta * 55); // Multiplied by 40
  e.preventDefault();
}

if (document.documentElement.clientWidth >= 768) {
  if (document.getElementById('main-container').addEventListener) {
    // IE9, Chrome, Safari, Opera
    document.getElementById('main-container').addEventListener("mousewheel", scrollHorizontally, false);
    // Firefox
    document.getElementById('main-container').addEventListener("DOMMouseScroll", scrollHorizontally, false);
  } else {
    // IE 6/7/8
    document.getElementById('main-container').attachEvent("onmousewheel", scrollHorizontally);
  }
}

function scroll() {
  if (document.documentElement.clientWidth >= 768) {
    if (document.getElementById('main-container').addEventListener) {
      // IE9, Chrome, Safari, Opera
      document.getElementById('main-container').addEventListener("mousewheel", scrollHorizontally, false);
      // Firefox
      document.getElementById('main-container').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
      // IE 6/7/8
      document.getElementById('main-container').attachEvent("onmousewheel", scrollHorizontally);
    }
  } else {
    if (document.getElementById('main-container').removeEventListener) {
      // IE9, Chrome, Safari, Opera
      document.getElementById('main-container').removeEventListener("mousewheel", scrollHorizontally, false);
      // Firefox
      document.getElementById('main-container').removeEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
      // IE 6/7/8
      document.getElementById('main-container').detachEvent("onmousewheel", scrollHorizontally);
    }
  }
}
/* For mobile phones: */

.container {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #BEBAB7;
  overflow: auto;
  scrollbar-width: none;
  white-space: normal;
}

* {
  margin: 0;
}

html,
body {
  background-color: #BEBAB7;
  height: 100%;
  font-family: sans-serif;
  color: #77212E;
}

.container::-webkit-scrollbar {
  display: none;
}

div.section {
  display: inline-block;
  height: 100%;
  width: 100%;
}

.body {
  margin-top: 25%;
  margin-left: 25%;
  width: 40%;
  white-space: normal;
}

.section-pic {
  width: 100px;
  height: 100px;
  margin-bottom: 25px;
  border-radius: 100px;
  border: 2px solid #77212E;
}

hr {
  border-color: #77212E;
}

.github-logo {
  width: 100px;
}

.nav {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1000;
}

.nav-link {
  margin: 5px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #77212E;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.nav-link.active::after {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .container {
    white-space: nowrap;
    height: auto;
    min-height: 100vh;
  }
  .body {
    position: relative;
    top: 50%;
    margin: auto;
  }
  .section {
    margin-top: 0;
    height: 100vh;
  }
  .nav {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
  }
  .nav-link {
    float: left;
    margin: 5px;
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/nav.css">
</head>

<body onresize="scroll()">
  <div class="nav">
    <div class="nav-link active" id="profile">
      Profile
    </div>
    <div class="nav-link" id="projects">
      Projects
    </div>
    <div class="nav-link" id="contact">
      Contact
    </div>
  </div>

  <div class="container" id="main-container">
    <div class="section" id="profile">
      <div class="body">
        <h1 class="heading" id="profile-heading"><img src="img/content/profile-pic.jpg" alt="Profile Pic" class="section-pic" align="middle"> Profile</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel euismod lorem, in condimentum leo. Nam a magna convallis, finibus odio at, tincidunt mi. Donec non erat varius, pulvinar sapien at, rhoncus lectus.
      </div>
    </div>
    <div class="section" id="projects">
      <div class="body">
        <h1 class="heading" id="profile-heading"><img src="img/content/projects-pic.jpg" alt="Projects Pic" class="section-pic" align="middle"> Projects</h1>
        orem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel euismod lorem, in condimentum leo. Nam a magna convallis, finibus odio at, tincidunt mi. Donec non erat varius, pulvinar sapien at, rhoncus lectus. Vivamus accumsan quam at arcu accumsan
        blandit. Aliquam quis dignissim sapien, a ullamcorper risus. Phasellus accumsan neque ligula, a dapibus neque vulputate at.
      </div>
    </div>
    <div class="section" id="contact">
      <div class="body">
        <h1 class="heading" id="profile-heading"><img src="img/content/contact-pic.jpg" alt="Contact Pic" class="section-pic" align="middle"> Contact</h1>
        <form action="">
          <input type="email">
          <input type="text">
          <textarea></textarea>
        </form>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/main.js" defer></script>
  <script type="text/javascript" src="js/scroll.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

If you expand and shrink the result window, you can see that the page goes from a horizontal layout to a vertical layout (you have to click run when changing the layout to make the scrolling work, idk why it doesn't work in jsfiddle correctly). As you can see, if you scroll when the layout is horizontal, each 'section' of the page has a different vertical positioning. How do i make it so that the vertical positioning is at the top of the page for each section?

A:

(Here is the fiddle of question codes: http://jsfiddle.net/6902zwjg/1/)
You assigned display: inline-block; to your sections. that cause your sections align on bottom. if you want vertical centering, you can use flex.
Example: https://codepen.io/anon/pen/zQbMzR

Float elements align on top by default.
Inline and Inline-block elements align on Bottom by default.
For vertical align, you can use flex.

