#titleLogo {
  padding-top: 1.5rem;
  text-align: center;
  z-index: 50;
}

nav {
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  z-index: 50;

  /* Sticky Navigation Bar */
  position: sticky;
  top: 0;

  /* Border */
  border-bottom: 1px solid lightgrey;
}


/* Larger than Smartphone Display */
@media (min-width: 768px) {
  body {
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
  }

  #titleLogo {
    /* Padding */
    padding-left: 4rem;
    padding-bottom: 1rem;

    /* Flex */
    flex: 1 0 50%;

    text-align: left;

    /* At mobile screen, the 'sticky' was already applied;
     * So in larger screen, what I have to do is just apply sticky option
     * to the rest.
     */
    position: sticky;
    top: 0;

    /* Border */
    border-bottom: 1px solid lightgrey;
  }
  nav {
    /* Padding */
    padding-right: 4rem;
    padding-top: 1.5rem;

    /* Flex */
    flex: 1 0 50%;

    /* Text */
    text-align: right;
  }
}