Why does my CSS layout keeps breaking when i resize my screen?

Question

Every time I practice CSS layouts, each time I resize the browser window, the screen on the right side of the site keeps getting cut off, so there will be an empty space with a white background. Can someone help me identify the issue so I can permanently avoid this from happening again? Here is the HTML code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
}

header {
  background: url(http://www.moirmedia.co.uk/wp-content/uploads/2016/05/Backgroundlow.jpg) no-repeat center center/cover;
  background-position: inherit;
  height: 165vh;
}

nav {
  background: black;
  padding: 1.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav h2 {
  text-transform: uppercase;
  font-size: 2.5rem;
  padding-right: 2rem;
}

nav ul {
  display: flex;
}

nav ul li {
  list-style: none;
  position: relative;
  right: 5rem;
  padding: 0 4rem;
  font-size: 1.2rem;
}

nav ul li a {
  text-decoration: none;
}

.hero-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.hero-text h1 {
  font-size: 4rem;
  padding: 1rem;
}

.hero-text p {
  font-size: 1.3rem;
  text-align: justify;
}

<header>
  <nav>
    <h2 class="logo">Logo</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="hero-text">
    <h1>Banner Text Heading</h1>
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum <br> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum <br> Lorem ipsum</p>
  </div>
</header>

Answer 1

The padding and right styles you have set on nav ul li push the content outside of the parent container. Adding in some responsive breakpoints with media queries will fix your issue and give you greater control of your layout at different screen resolutions. MDN has an article Beginner's guide to media queries providing more information on media queries.

Below is an example of using media queries with your code. Note how each breakpoint has specified a padding-right value which you may need to tweak so that your content fits as expected. Fine tuning can be a process. I used breakpoints from Typical Device Breakpoints as a good starting point.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
}

header {
  background: url(http://www.moirmedia.co.uk/wp-content/uploads/2016/05/Backgroundlow.jpg) no-repeat center center/cover;
  background-position: inherit;
  height: 165vh;
  width: 100%;
}

nav {
  background: black;
  padding: 1.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

nav h2 {
  text-transform: uppercase;
  font-size: 2.5rem;
  padding-right: 2rem;
}

nav ul {
  display: flex;
}

nav ul li {
  list-style: none;
  position: relative;
  padding: 0 0.5rem;
  font-size: 1.2rem;
}

nav ul li a {
  text-decoration: none;
}

.hero-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.hero-text h1 {
  font-size: 4rem;
  padding: 1rem;
}

.hero-text p {
  font-size: 1.3rem;
  text-align: justify;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  nav ul li {
    padding-right: 0.5rem;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  nav ul li {
    padding-right: 0.8rem;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  nav ul li {
    padding-right: 1.8rem;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  nav ul li {
    padding-right: 3rem;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  nav ul li {
    right: 5rem;
    padding-right: 4rem;
  }
}

<header>
  <nav>
    <h2 class="logo">Logo</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="hero-text">
    <h1>Banner Text Heading</h1>
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum <br> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum <br> Lorem ipsum</p>
  </div>
</header>

Here is an alternative approach using flexbox properties such as justify-content and putting the padding on a elements to increase touch target size which improves accessibility of your site. I'd suggest this option as it's less code to manage, a more modern approach, and achieves similar results.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
}

header {
  background: url(http://www.moirmedia.co.uk/wp-content/uploads/2016/05/Backgroundlow.jpg) no-repeat center center/cover;
  background-position: inherit;
  height: 165vh;
  width: 100%;
}

nav {
  background: black;
  padding: 1.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

nav h2 {
  text-transform: uppercase;
  font-size: 2.5rem;
  padding-right: 2rem;
}

nav ul {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

nav ul li {
  list-style: none;
  position: relative;
  font-size: 1.2rem;
}

nav ul li a {
  text-decoration: none;
  padding: 1rem 0.5rem;
}

nav ul li a:hover {
  text-decoration: underline;
}

.hero-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.hero-text h1 {
  font-size: 4rem;
  padding: 1rem;
}

.hero-text p {
  font-size: 1.3rem;
  text-align: justify;
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
  nav ul {
    justify-content: space-evenly;
  }
  nav ul li a {
    padding: 1rem;
  }
}

<header>
  <nav>
    <h2 class="logo">Logo</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="hero-text">
    <h1>Banner Text Heading</h1>
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum <br> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum <br> Lorem ipsum</p>
  </div>
</header>

Either option still doesn't fit all of your nav items on a single line on small screen such as mobile devices. I suggest you look into alternative navigation patterns such as a collapsible menu or even just wrap your content with flex-wrap: wrap; as @Yudiz_Webdesign noted in their answer.

Answer 2

Replace your css code from this

nav ul {
  display: flex;
}

nav ul li {
  list-style: none;
  position: relative;
  right: 5rem;
  padding: 0 4rem;
  font-size: 1.2rem;
}

to changed one

nav ul {
  display: flex;
  flex-wrap: wrap;
}

nav ul li {
  list-style: none;
  position: relative;
  padding: 0 2rem;
  font-size: 1.2rem;
}