Using @media to keep nav elements in place when adjusting screen size

user_13975779 0
Viewed 83

https://jsfiddle.net/5fmcdw1e/4

I am trying to make it so my nav elements "Home", "Learning", "Hobbies" don't move from their location. I am currently using @media and just adjusting the font-size but it eventually get's too small and/or moves down when I want it to not move. I'm sure someone smarter can help or has an idea what the best way of doing this is.

Thanks! (also i'm pretty new to css and html) any help pointing me in the right direction is much appreciated.

<html>

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

  </head>

  <body>
    <header class='header'>
      <div class='container'>
        <img class="logo-kekw" src="icons/kekw.png" alt="kekw">
        <nav>
          <ul>
            <li>
              <a href='index.html'>Home</a>
            </li>
            <li>
              <a href="#">Learning</a>
            </li>
            <li>
              <a href="#box-title">Hobbies</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <div id="box">

      <div id="box-title">
        I am learning about:
      </div>
      <div id="content">box-models, box-sizing, margins, padding, @media, and more currently.</div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
    </div>

    <div id="box">
      <div id="hobbies">
        Hobbies:
      </div>
      <div id="content">Skateboarding, programming in html, css, javascript (yet to learn), python, biking, longboarding, hiking, snowboarding.</div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
      <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
    </div>
    <div id="container-footer">
      <footer id="footer">
        <ul id="ul-footer">
          <li id="email"><a href="">Email me</a></li>
          <li id="instagram"><a href="">Instagram</a></li>
          <li id="kik"><a href="">Kik</a></li>
        </ul>
      </footer>
    </div>
  </body>

</html>

h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
li {
  font-family: "proxima-nova", sans-serif;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.header {
  font-size: 24px;
  width: 100%;
  height: 100px;
  background-color: rgb(18 39 45);
  position: fixed;
  text-align: center;
  line-height: 50px;
  top: 0;
  left: 0;
  border-bottom: 1px solid turquoise;
}

.logo-kekw:hover {
  border-radius: 50%;
}

.logo-kekw {
  border-radius: 50%;
  border: #62b862dc solid 2px;
  padding: 1.8px 1.8px;
  height: 75px;
  width: 75px;
  float: left;
  margin-top: 9px;
  margin-left: 42px;
}

.header nav {
  float: right;
  padding-right: 35px;
  line-height: 50px;
}

.header nav ul li {
  list-style: none;
  display: inline-block;
  margin-left: 25px;
}

.header nav ul li a:hover {
  transition-duration: .3s;
  color: white;
}

.header nav ul li a {
  text-decoration: none;
  color: #f67600;
  font-size: 40px;
  margin-left: 10px;
  margin-right: 10px;
  cursor: crosshair;
}

.header.shadow {
  box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

body {
  height: 100%;
  background-color: #100e17;
  margin-top: 120px;
}

#box-title {
  letter-spacing: 2px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  box-sizing: border-box;
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  color: white;
  text-transform: uppercase;
  margin-bottom: 25px;
  margin-top: 15px
}

#box #content {
  padding: 10px;
  border: 2px solid black;
}

#hobbies {
  box-sizing: border-box;
  letter-spacing: 2px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  color: white;
  text-transform: uppercase;
  margin-bottom: 25px;
  margin-top: 15px
}

#box {
  background-color: rgb(94 94 125 / 50%);
  padding: 10px;
  border: solid 2px black;
  margin: auto;
  width: 75%;
  height: 400px;
  box-sizing: border-box;
  overflow: scroll;
  margin-bottom: 150px;
}

#content {
  margin-top: 10px;
  font-size: 16px;
  background-color: #62b862dc;
  text-align: center;
  /*green*/
}

#footer {
  font-family: "Lucida Console", Courier, monospace;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(18 36 41);
  border-top: 1px solid turquoise;
  text-align: center;
  height: 70px;
}

#footer ul li {
  display: inline;
}

#footer ul li a {
  text-decoration: none;
  font-size: 32px;
  margin-right: 10px;
  font-family: "proxima-nova", sans-serif;
  padding: .2em 1em;
  color: #f67600;
  background-color: black;
  border: 1px solid white;
}

#footer ul li a:hover {
  background-color: #f67600;
  transition-duration: .3s;
  color: black;
  border: solid 1px white;
}


/*
#email a:hover {
    background-color: black;
    transition-duration: .1s;
    color: #ffffff;
    border: solid 2px;
    text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
    padding-left: 3%;
    padding-right: 3%;
}
*/

::-webkit-scrollbar {
  width: 5px;
}


/* Track */

::-webkit-scrollbar-track {
  overflow: hidden;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: #1aa260;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: #7a00708c;
}

@media screen and (max-width: 900px) {
  body {
    font-size: 32px;
  }
}

@media screen and (min-width: 695px) and (max-width: 950px) {
  .header nav ul li a {
    font-size: 20px;
  }
}

@media screen and (min-width: 633px) and (max-width: 695px) {
  .header nav ul li a {
    font-size: 15px;
  }
}

@media screen and (min-width: 400px) and (max-width: 632px) {
  .header nav ul li a {
    font-size: 8px;
  }
}
css html
3 Answers

Over here you're applying margin-left: 25px, which will result on smaller screen that this links will jump underneath the parent because they don't have enough space. Same for the header logo you're applying margin-left: 42px. Simply take of this margin values and check your results again.

If you want to get away from this issues have a look on the flex-box or grid layouts. There're plenty of resources on internet just search.

user_110780560

My proposition to your problem is to keep a fixed font-size and when it is moved down, you can use responsive menu Bar, https://www.w3schools.com/howto/howto_js_topnav_responsive.asp . And that way Home, Learning and Hobbies will always remain readable.

I change a little your CSS-code (3 times /*add*/), such that you can see what I mean (resize and you will see that nav backgorund-color change from green to red)

.container {
    width: 80%;
    margin: 0 auto;
    display: inline; /*add*/
}

.header {
    font-size: 24px;
    width: 100%;
    height: 100px;
    background-color: rgb(18 39 45);
    position: fixed;
    line-height: 50px;
    top: 0;
    left: 0;
    border-bottom: 1px solid turquoise;
}

.logo-kekw:hover {
    border-radius: 50%;
}

.logo-kekw {
    border-radius: 50%;
    border: #62b862dc solid 2px;
    padding: 1.8px 1.8px;
    height: 75px;
    width: 75px;
    float: left;
    margin-top: 9px;
    margin-left: 42px;
}

.header nav {
    float: right;
    padding-right: 35px;
    line-height: 50px;
    background-color: green; /*add*/
}

.header nav ul li {
    list-style: none;
    display: inline-block;
    margin-left: 25px;
}

.header nav ul li a:hover {
    transition-duration: .3s;
    color: white;
}

.header nav ul li a {
    text-decoration: none;
    color: #f67600;
    margin-left: 10px;
    margin-right: 10px;
    cursor: crosshair;
    font-size: 30px;
}

.header.shadow {
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

body {
    height: 100%;
    background-color: #100e17;
    margin-top: 120px;
}

#box-title {
    letter-spacing: 2px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-sizing: border-box;
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    color: white;
    text-transform: uppercase;
    margin-bottom: 25px;
    margin-top: 15px
}

#box #content {
    padding: 10px;
    border: 2px solid black;
}

#hobbies {
    box-sizing: border-box;
    letter-spacing: 2px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    color: white;
    text-transform: uppercase;
    margin-bottom: 25px;
    margin-top: 15px
}

#box {
    background-color: rgb(94 94 125 / 50%);
    padding: 10px;
    border: solid 2px black;
    margin: auto;
    width: 75%;
    height: 400px;
    box-sizing: border-box;
    overflow: scroll;
    margin-bottom: 150px;
}

#content {
    margin-top: 10px;
    font-size: 16px;
    background-color: #62b862dc;
    text-align: center;
    /*green*/
}

#footer {
    font-family: "Lucida Console", Courier, monospace;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(18 36 41);
    border-top: 1px solid turquoise;
    text-align: center;
    height: 70px;
}

#footer ul li {
    display: inline;
}

#footer ul li a {
    text-decoration: none;
    font-size: 32px;
    margin-right: 10px;
    font-family: "proxima-nova", sans-serif;
    padding: .2em 1em;
    color: #f67600;
    background-color: black;
    border: 1px solid white;
}

#footer ul li a:hover {
    background-color: #f67600;
    transition-duration: .3s;
    color: black;
    border: solid 1px white;
}


/*
#email a:hover {
    background-color: black;
    transition-duration: .1s;
    color: #ffffff;
    border: solid 2px;
    text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
    padding-left: 3%;
    padding-right: 3%;
}
*/

::-webkit-scrollbar {
    width: 5px;
}


/* Track */

::-webkit-scrollbar-track {
    overflow: hidden;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: #1aa260;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: #7a00708c;
}

@media screen and (max-width: 900px) {
    body {
        font-size: 32px;
    }
}

@media screen and (max-width: 660px) { /*add*/
    /*responsive menu bar*/
    .header nav {
        background-color: red;
    }
}
<!DOCTYPE html>
<html>

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

</head>

<body>
    <header class='header'>
        <div class='container'>
            <img class="logo-kekw" src="icons/kekw.png" alt="kekw">
            <nav>
                <ul>
                    <li>
                        <a href='index.html'>Home</a>
                    </li>
                    <li>
                        <a href="#">Learning</a>
                    </li>
                    <li>
                        <a href="#box-title">Hobbies</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <div id="box">

        <div id="box-title">
            I am learning about:
        </div>
        <div id="content">box-models, box-sizing, margins, padding, @media, and more currently.</div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
    </div>

    <div id="box">
        <div id="hobbies">
            Hobbies:
        </div>
        <div id="content">Skateboarding, programming in html, css, javascript (yet to learn), python, biking, longboarding, hiking, snowboarding.</div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
        <div id="content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquid esse perspiciatis itaque est placeat tempora libero, inventore iure quam, cupiditate, recusandae optio ex fugit! Expedita ratione voluptatem repellendus nisi? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Eligendi harum laboriosam velit esse, labore repellendus asperiores aliquid? Quas odio dolores quia accusantium, sed magnam possimus optio veritatis assumenda ratione unde! </div>
    </div>
    <div id="container-footer">
        <footer id="footer">
            <ul id="ul-footer">
                <li id="email"><a href="mailto:walnuts@email.com">Email me</a></li>
                <li id="instagram"><a href="https://www.instagram.com/kickflips/">Instagram</a></li>
                <li id="kik"><a href="https://kik.me/activism">Kik</a></li>
            </ul>
        </footer>
    </div>
</body>

</html>

user_123057150

just a few changes to your code will bring you a little bit further to what you want:

.header nav {
    float: right;
    line-height: 50px;
}

Remove padding here because you have a div around with width 80%, that's enougth.

ul {
    display: inline-flex;
}

This will prevent you list items from wrapping around.

@media screen and (max-width: 400px) {
    .container, ul {
        display: flex;
        flex-flow: column wrap;
    }
}

Add media query to handle smallest screens.

From here it's up to you to make further improvements. Follow advice of @codeHysteria and have a look into flexbox css. This will help you to get a simple and clean page grid. For more complex grids use css-grid.

user_93700260
Related