HTML/CSS 3 Layout issues

[techabie]

Every time I added a new block to build the entire page, I checked layout issues with Chrome Dev tool. Besides the issues Mosh mentioned in the video, I found some other issues so I fixed them myself. I remember to check the screen size (mobile S, tablet, laptop size) in Chrome Dev. Everything looked fine so I added animation. After that, I noticed that I’m able to scroll horizontally in device tool and see white space on the right. Even after I exit the device tool, I can still scroll and see the white space. The list in my nav bar got cut off in mid-size screen. I don’t know what I did wrong.

:root {
  --color-primary: #2584ff;
  --color-secondary: #00d9ff;
  --color-accent: #ff3400;
  --color-headings: #1b0960;

  --color-body: #918ca4;
  --color-body-darker: #5c5577;
  --color-border: #ccc;
  --border-radius: 30px;
  --color-off-black: #232323;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

/* Typography */
::selection {
  background: var(--color-primary);
  color: #fff;
}
html {
  font-size: 62.5%;
}
body {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 2.4rem;
  line-height: 1.5;
  color: var(--color-body);
}

h1,
h2,
h3 {
  color: var(--color-headings);
  margin-bottom: 1rem;
  line-height: 1.1;
}
h1 {
  font-size: 7rem;
}
h2 {
  font-size: 4rem;
}

h3 {
  font-size: 3rem;
  font-weight: 500;
}
p {
  margin-top: 0;
}

@media screen and (min-width: 1024px) {
  body {
    font-size: 1.8rem;
  }
  h1 {
    font-size: 8rem;
  }
  h2 {
    font-size: 4rem;
  }
  h3 {
    font-size: 2.4rem;
  }
}

/* Links */
a {
  text-decoration: none;
}
.link-arrow {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: bold;
}

.link-arrow::after {
  content: "-->";
  margin-left: 5px;
  transition: margin 0.15s;
}

.link-arrow:hover::after {
  margin-left: 10px;
}
@media screen and (min-width: 1024px) {
  .link-arrow {
    font-size: 1.5rem;
  }
}
/* Badges */
.badge {
  border-radius: 20px;
  font-size: 2rem;
  font-weight: 600;
  padding: 0.5rem 2rem;
  white-space: nowrap;
}

.badge--primary {
  background: var(--color-primary);
  color: #fff;
}
.badge--secondary {
  background-color: var(--color-secondary);
  color: #fff;
}
.badge--small {
  font-size: 1.6rem;
  padding: 0.5rem 1rem;
}
@media screen and (min-width: 1024px) {
  .badge {
    font-size: 1.5rem;
  }
  .badge--small {
    font-size: 1.2rem;
  }
}

/* Lists */
.list {
  list-style: none;
  padding-left: 0;
}
.list--inline .list__item {
  display: inline-block;
  margin-right: 2rem;
}

.list--tick {
  list-style-image: url(../images/tick.svg);
  padding-left: 3rem;
  color: var(--color-headings);
}
.list--tick {
  padding-left: 0.5rem;
  margin-bottom: 1rem;
}
@media screen and (min-width: 1024px) {
  .list--tick .list__item {
    padding-left: 0;
  }
}

/* Icons  */
.icon {
  width: 40px;
  height: 40px;
}
.icon--primary {
  fill: var(--color-primary);
}
.icon-container {
  background: #f3f9fa;
  width: 64px;
  height: 64px;
  border-radius: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-container--accent {
  background: var(--color-accent);
}
.icon--white {
  fill: #fff;
}
.icon--small {
  width: 30px;
  height: 30px;
}
/* Buttons */
.btn {
  border-radius: 40px;
  border: none;
  /* to have <a> get pointer effect like button */
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 600;
  margin: 1rem 0;
  padding: 2rem 4vw;
  
  text-align: center;
  text-transform: uppercase;
 
  white-space: nowrap;

  line-height: 1.15; /*without this, the <a> inherit line height of 1.5 from normalize.css*/
}
.btn .icon {
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
  vertical-align: middle;
}
.btn--primary {
  color: #fff;
  background-color: var(--color-primary);
}
.btn--primary:hover {
  background: #599ef8;
}

.btn--secondary {
  color: #fff;
  background-color: var(--color-secondary);
}

.btn--secondary:hover {
  background: #40def9;
}
.btn--accent {
  background: var(--color-accent);
  color: #fff;
}
.btn--accent:hover {
  background: #fd5227;
}
.btn--dark {
  background: var(--color-headings);
  color: #fff;
}
.btn--dark:hover {
  background: #260b82;
}



.btn--stretched {
  padding-left: 6rem;
  padding-right: 6rem;
}
.btn--block {
  width: 100%;
  display: inline-block;
}
.btn--outline {
  background: #fff;
  color: var(--color-headings);
  border: 2px solid var(--color-headings);
}
.btn--outline:hover {
  background: var(--color-headings);
  color: #fff;
}

@media screen and (max-width: 378px) {
  .btn {
    padding: 1.5rem 2.2rem;
  }
}
@media screen and (min-width: 1024px) {
  .btn {
    font-size: 1.8rem;
  }
}

/* Inputs */
.input {
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  color: var(--color-headings);
  font-size: 2rem;
  outline: 0;
  padding: 1.5rem 3.5rem;
}
::placeholder {
  font-size: 1.5rem;
  color: #cdcbd7;
}
.input-group {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  display: flex;
}
.input-group .input {
  border: 0;
  /* the flex-grow would make the input take the most part */
  flex-grow: 1;
  padding: 1.5rem 2rem;
  width: 0;
}
.input-group .btn {
  margin: 4px;
}
@media screen and (min-width: 1024px) {
  .input {
    font-size: 1.5rem;
  }
}

/* Cards */
.card {
  border-radius: 7px;
  box-shadow: 0 0 20px 10px #f3f3f3;
  overflow: hidden;
}
.card__header,
.card__body {
  padding: 2rem 3rem;
}
.card--primary .card__header {
  background: var(--color-primary);
  color: white;
}
.card--primary .badge--primary {
  background: #126de4;
}
.card--secondary .card__header {
  background: var(--color-secondary);
  color: white;
}
.card--secondary .badge--secondary {
  background: #02cdf1;
}

/* this skin of the card component will prevent the red quote icon of the testimonial
from missing the right side  */
.card--testimonial {
  overflow: visible;
}

/* Plan */

.plan {
  transition: transform 0.2s ease-out;
}
.plan__name {
  color: #fff;
  margin: 0;
  font-weight: 500;
  font-size: 2.4rem;
}
.plan__price {
  font-size: 6rem;
}
.plan__billing-cycle {
  font-size: 2.4rem;
  font-weight: 300;
  opacity: 0.8;
  margin-right: 1rem;
}
.plan__description {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 1px;
  opacity: 0.8;
  display: block;
}
.plan .list__item {
  margin-bottom: 2rem;
  letter-spacing: 1px;
  font-weight: 500;
}
.plan--popular {
  transform: scale(1.1);
}
.plan--popular .card__header {
  position: relative;
}
.plan--popular .card__header::before {
  content: url(../images/popular.svg);
  width: 40px;
  display: inline-block;
  position: absolute;
  top: -6px;
  right: 5%;
}
.plan:hover {
  transform: scale(1.05);
}
.plan--popular:hover {
  transform: scale(1.15);
}
.plan__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px;
}

@media screen and (min-width: 1024px) {
  .plan__name {
    font-size: 1.4rem;
  }
  .plan__price {
    font-size: 5rem;
  }
  .plan__billing-cycle {
    font-size: 1.6rem;
  }
  .plan__description {
    font-size: 1.7rem;
  }
  .plan--popular .plan__billing-cycle {
    margin-right: 0;
  }
}
@media screen and (min-width: 1440px) {
  .plan--popular .plan__billing-cycle {
    margin-right: 1rem;
  }
}
/* Media  */

.media {
  display: flex;
  margin-bottom: 4rem;
}

.media__title {
  margin-top: 0;
}
.media__body {
  margin: 0 2rem;
}
.media__image {
  margin-top: 1rem;
}


/* Quotes */
.quote {
  font-size: 2rem;
  font-style: italic;
  color: var(--color-body-darker);
  font-weight: 500;
  line-height: 1.3;
  margin-inline: 10px;
}
.quote__text::before {
  content: open-quote;
}
.quote__text::after {
  content: close-quote;
}

.quote__author {
  font-size: 2.5rem;
  font-weight: 500;
  font-style: normal;
  margin-bottom: 0;
}

.quote__organization {
  font-style: normal;
  font-size: 2rem;
  color: var(--color-headings);
  opacity: 0.4;
}

.quote__line {
  position: relative;
  bottom: 10px;
}

@media screen and (min-width: 600px) {
  .quote {
    font-size: 3rem;
  }
  .quote__author {
    font-size: 3rem;
  }
  .quote__organization {
    font-size: 2.5rem;
  }
}
@media screen and (min-width: 1024px) {
  .quote {
    font-size: 2.4rem;
  }
  .quote__author {
    font-size: 2.4rem;
  }
  .quote__organization {
    font-size: 1.6rem;
  }
}

/* Grid */
.grid {
  display: grid;
}
@media screen and (min-width: 768px) {
  .grid--1x2 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1024px) {
  .grid--1x3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 768px) {
  .grid--1x5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Testimonials */

.testimonial {
  padding: 3rem;
}
.testimonial__image {
  position: relative;
}
.testimonial__image > img {
  width: 100%;
}
.testimonial__image > .icon-container {
  position: absolute;
  top: 3rem;
  right: -32px;
}

@media screen and (min-width: 768px) {
  .testimonial .quote,
  .testimonial .quote__author {
    font-size: 2.4rem;
  }
  .testimonial .quote {
    margin-left: 6rem;
  }
}

/* Callouts */
.callout {
  padding: 4rem;
  border-radius: 10px;
}
.callout--primary {
  background: var(--color-primary);
  color: white;
}
.callout__heading {
  color: #fff;
  margin-top: 0;
  font-size: 4rem;
}
.callout .btn {
  justify-self: center;
  align-self: center;
}
.callout__content {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .callout .grid--1x2 {
    grid-template-columns: 1fr auto;
  }
  .callout__content {
    text-align: left;
  }
  .callout .btn {
    justify-self: start;
    margin-left: 2rem;
  }
}
/* Collapsible */
.collapsible__header {
  display: flex;
  justify-content: space-between;
  font-size: 3rem;
}

.collapsible__heading {
  margin-top: 0;
}

.collapsible__chevron {
  transform: rotate(-90deg);
  transition: transform 0.3s;
}
.collapsible__content {
  /* the max-height set to 0 to get the transition when the collapsible expanded by a click */
  max-height: 0;
  overflow: hidden;
  /* to get the transition looks smoother, use opacity */
  opacity: 0;
  /* all mean max-height and opacity, we want those props to have nice transition */
  transition: all 0.3s;
}

.collapsible--expanded .collapsible__chevron {
  transform: rotate(0);
}
.collapsible--expanded .collapsible__content {

  max-height: 100vh;
  opacity: 1;
}

/* Blocks */

.block {
  --padding-vertical: 6rem;
  padding: var(--padding-vertical) 2rem;
}
.block__header {
  text-align: center;
  margin-bottom: 4rem;
}
.block__heading {
  margin-top: 0;
}
.block--dark {
  background: black;
  color: #7b858b;
}
.block--dark h1,
.block--dark h2,
.block--dark h3 {
  color: #fff;
}
.block--skewed-right {
  padding-bottom: calc(var(--padding-vertical) + 4rem);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 96%);
}

.block--skewed-left {
  padding-bottom: calc(var(--padding-vertical) + 4rem);
  clip-path: polygon(0% 0%, 100% 0%, 100% 96%, 0% 100%);
}


.container {
  max-width: 1140px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .block--skewed-right {
    padding-bottom: calc(var(--padding-vertical) + 4rem);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
  }

  .block--skewed-left {
    padding-bottom: calc(var(--padding-vertical) + 4rem);
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);
  }
}

/* Navigation Bar */
.nav {
  background: black;
  display: flex;
  justify-content: space-between;
  /* flex-wrap: wrap and the .nav__list width:100% will make
  the list appear on the second row of the flex container. */
  flex-wrap: wrap;
  padding: 1rem;
  align-items: center;
}
.nav__list {
  width: 100%;
  margin: 0;
}
.nav__item {
  color: #fff;
  padding: 0.5rem 2rem;
  border-bottom: 1px solid #222;
  transition: color 0.3s;
}

.nav__item > a {
  color: #d2d0db;
}
.nav__item > a:hover {
  color: #fff;
}
.nav__toggler {
  opacity: 0.5;
  transition: box-shadow 0.15s;
  cursor: pointer;
}
.nav.collapsible--expanded .nav__toggler {
  opacity: 1;
  box-shadow: 0 0 0 3px #666;
  border-radius: 5px;
}
.nav__brand {
  /* something about the design of the logo.svg, its bottom has extra space.
  To fix   */
  transform: translateY(5px);
}
@media screen and (min-width: 768px) {
  .nav__toggler {
    display: none;
  }
  .nav__list {
    /* to have the list vibible on load, we need to set max-height and opacity. 
    this is to offset the styling of the .collapsible__content */
    max-height: 100%;
    opacity: 1;
    width: auto;
    display: flex;
    font-size: 1.6rem;
  }
  .nav__item {
    border: 0;
  }
}

/* Hero */

.hero__tagline {
  font-size: 2rem;
  color: #b9c3cf;
  letter-spacing: 1px;
  margin: 2rem 0 5rem;
}
.hero__image {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .hero {
    padding-top: 0;
  }
  .hero__content {
    text-align: left;
    /*we have grid container box, to get the hero content aligned in the center of the Y-axis,
    use align-self */
    align-self: center;
  }
}

/* Domain Block */
.block-domain .input-group {
  box-shadow: 0 0 30px 20px #e6ebee;
  border: 0;
  margin: 4rem auto;
  max-width: 670px;
}
.block-domain__prices {
  color: var(--color-headings);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 6rem is for the height of each row */
  grid-template-rows: repeat(2, 6rem);
  font-size: 2rem;
  font-weight: 600;
  justify-items: center;
  max-width: 700px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .block-domain__prices {
    /* use auto-fit to let browser decide the no. of column needed when we add
    extra list items in future. Use repeat(auto-fit, 1fr) doesn't change anything.
    use minmax(100px,1fr) to let browser decide if there is extra space it will fit more
    columns but still make sure the min-width of 100px  */
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}
/* Plans Block */
.block-plans .grid {
  gap: 8rem 4rem;
}
@media screen and (min-width: 768px) {
  .block-plans .card {
    max-width: 500px;
    margin: 0 auto;
  }
}

/* Features */
.feature {
  gap: 4rem 2rem;
  margin: 12rem 0;
}
.feature:first-of-type {
  margin-top: 6rem;
}
.feature__heading {
  margin: 1rem 0;
}
.feature__image {
  width: 100%;
}
@media screen and (min-width: 768px) {
  /* to make even no. feature have image come before content, use oder:2 */
  .feature:nth-of-type(even) .feature__content {
    order: 2;
  }
}

/* Showcase Block  */
.block-showcase .container {
  margin: 0 1.5rem;
}

.block-showcase__image > img {
  /* to make img responsive in small screen */
  width: 100%;
}
/* on wide screen, we dont' want a responsive img, we want the img to to keep its width,
 not get any larger or smaller, no horizontal scrolling. part of the img will not be seen
 if the screen is not wide enough.
 */
@media screen and (min-width: 768px) {
  .block-showcase .grid {
    /* 50% 50% is different from 1fr 1fr 
    1fr mean each part take 1 slice, 50% mean each part take 50% of 
    the container width*/
    grid-template-columns: 50% 50%;
  }
  .block-showcase__image {
    /* we want the imange to align at on the right end so that we can't see
    the left part of the img on screen that aren't wide enough */
    justify-self: end;
  }
  .block-showcase__image > img {
    /* width:auto is to make sure the image use up avail space */
    width: auto;
    /* we want to keep the width to be 700px max, not  larger */
    max-width: 700px;
  }
  .block-showcase__list {
    margin-left: 4rem;
  }
}

/* Footer */
.footer {
  background: var(--color-off-black);
}
.footer__section {
  padding: 2rem;
  border-bottom: 1px solid #393939;
}
.footer__section .list {
  margin: 0;
}
.footer__heading {
  font-size: 3rem;
  text-transform: uppercase;
  font-weight: 600;
}
.footer li {
  font-size: 2.4rem;
}
.footer__brand {
  margin-top: 5rem;
  text-align: center;
}
.footer__brand img {
  /* TODO: consider reractoring this and applying it to all images.*/
  width: 100%;
  /* 230px is the width of the logo img */
  max-width: 230px;
}
.footer__copyright {
  font-size: 1.5rem;
  color: #fff;
  opacity: 0.3;
}
.footer a {
  color: #777;
  transition: color 0.3s;
}
.footer a:hover {
  color: #fff;
}

@media screen and (min-width: 768px) {
  .footer__sections {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
  .footer .collapsible__chevron {
    display: none;
  }
  .footer .collapsible__content {
    opacity: 1;
    max-height: 100%;
  }
  .footer__brand {
    order: -1;
    margin-top: 2rem;
  }

  .footer__section {
    border-bottom: none;
  }
  .footer__heading {
    font-size: 2rem;
  }
  .footer li {
    font-size: 1.5rem;
  }
}

/* Callout-Block */
.callout-block {
  background: linear-gradient(to bottom, #fff 50%, #232323 50%);
}
.callout-block .callout {
  margin: 0 2rem;
}
.callout-block .callout__heading {
  font-size: 3.2rem;
}
.callout-block p {
  font-size: 1.8rem;
}
@media screen and (min-width: 500px) {
  .callout-block .callout__heading {
    font-size: 4rem;
  }
  .callout-block p {
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 1024px) {
  .callout-block .callout {
    margin: 0 6rem;
  }
}

[techabie]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Moshify</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  </head>
  <body>
    <header>
      <nav class="nav collapsible">
        <a class="nav__brand" href="/"
          ><img src="images/logo.svg" alt="Moshify Logo"
        /></a>
        <svg class="icon icon--white nav__toggler">
          <use xlink:href="images/sprite.svg#menu"></use>
        </svg>
        <ul class="list nav__list collapsible__content">
          <li class="nav__item"><a href="#">Hosting</a></li>
          <li class="nav__item"><a href="#">VPS</a></li>
          <li class="nav__item"><a href="#">Domain</a></li>
          <li class="nav__item"><a href="#">Pricing</a></li>
        </ul>
      </nav>
    </header>
    <section class="block block--dark block--skewed-left hero">
      <div class="container grid grid--1x2">
        <header class="block__header hero__content">
          <h1 class="block__heading" data-aos="zoom-in-up">Cloud Hosting for Pros</h1>
          <p class="hero__tagline">
            Deploy your websites in less than 60 seconds.
          </p>
          <a href="#" class="btn btn--accent btn--stretched">Get started</a>
        </header>
        <picture data-aos="zoom-in-up">
          <source
            type="image/webp"
            srcset="images/banner.webp 1x, images/[email protected] 2x" />
          <source
            type="image/png"
            srcset="images/banner.png 1x, images/[email protected] 2x" />
          <img class="hero__image" src="images/banner.png" alt=""
        /></picture>
      </div>
    </section>

    <section class="block container block-domain">
        <header class="block__header" data-aos="fade-up">
          <h2>Staring at $9 per month</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi eum
            impedit explicabo et voluptatibus quia, similique cumque rem iusto
            optio?
          </p>
        </header>
        <div class="input-group">
          <input
            type="text"
            class="input"
            placeholder="Enter domain name here..."
          />
          <button class="btn btn--accent">
            <svg class="icon icon--primary icon--white">
              <use xlink:href="images/sprite.svg#search"></use>
            </svg>
            Search
          </button>
        </div>
        <ul class="list block-domain__prices">
          <li><span class="badge badge--secondary">.com $9</span></li>
          <li>.sg $10</li>
          <li>.space $11</li>
          <li>.info $14</li>
          <li>.net $10</li>
          <li>.xyz $10</li>
        </ul>
      </div>
    </section>
    <section class="block container block-plans">
      <div class="grid grid--1x3" data-aos="fade-up">
      <div class="plan">
        <div class="card card--secondary plan__card">
          <header class="card__header ">
            <!-- use h3 here because we want to keep hierrachy and semantic in html, never skip and jump to h5 or h6 because
               it's not good. we can style this h3 using class selector -->
            <h3 class="plan__name">Entry</h3>
            <span class="plan__price">$14</span>
            <span class="plan__billing-cycle">/month</span>
            <span class="badge badge--secondary badge--small">10% OFF</span>
            <span class="plan__description">Easy start on the cloud</span>
          </header>
          <div class="card__body">
            <div class="plan__body">
                <ul class="list list--tick">
                  <li class="list__item">Unlimited Websites</li>
                  <li class="list__item">Unlimited Bandwidth</li>
                  <li class="list__item">100 GB SSD Storage</li>
                  <li class="list__item">3 GB RAM</li>
                </ul>
                <button class="btn btn--outline btn--block">Buy Now</button>
            </div>
          </div>
        </div>
      </div>
      <div class="plan plan--popular">
        <div class="card  card--primary">
          <header class="card__header">
            <h3 class="plan__name">Business</h3>
            <span class="plan__price">$24</span>
            <span class="plan__billing-cycle">/month</span>
            <span class="badge badge--primary badge--small">20% OFF</span>
            <span class="plan__description">Optimal Cloud Experience</span>
          </header>
          <div class="card__body">
            <div class="plan__body">
                <ul class="list list--tick">
                  <li class="list__item">Unlimited Websites</li>
                  <li class="list__item">Unlimited Bandwidth</li>
                  <li class="list__item">100 GB SSD Storage</li>
                  <li class="list__item">3 GB RAM</li>
                  <li class="list__item">2 CPU Cores</li>
                </ul>
                <button class="btn btn--dark btn--block">Buy Now</button>
            </div>
          </div>
        </div>
      </div>
      <div class="plan ">
        <div class="card card--secondary">
          <header class="card__header ">
            <h3 class="plan__name">Business plus</h3>
            <span class="plan__price">$54</span>
            <span class="plan__billing-cycle">/month</span>
            <span class="badge badge--secondary badge--small">10% OFF</span>
            <span class="plan__description">Easy start on the cloud</span>
          </header>
          <div class="card__body">
            <div class="plan__body">
                <ul class="list list--tick">
                  <li class="list__item">Unlimited Websites</li>
                  <li class="list__item">Unlimited Bandwidth</li>
                  <li class="list__item">100 GB SSD Storage</li>
                  <li class="list__item">3 GB RAM</li>
                  <li class="list__item">2 CPU Cores</li>
                </ul>
                <button class="btn btn--outline btn--block">Buy Now</button>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="block container">
      <header class="block__header" data-aos="fade-right">
        <h2>Host on the Cloud to Keep Growing</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos pariatur
          temporibus doloribus quis ducimus labore?
        </p>
      </header>
      <article class="grid grid--1x2 feature">
        <div class="feature__content" data-aos="fade-right">
          <span class="icon-container">
            <svg class="icon icon--primary">
              <use xlink:href="images/sprite.svg#easy"></use>
            </svg>
          </span>
          <h3 class="feature__heading">Super Easy To Use</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum
            voluptatibus iusto natus pariatur dolore vero quidem commodi, voluptatum
            dolor eius?
          </p>
          <a href="#" class="link-arrow">Learn More</a>
        </div>
        <picture data-aos="fade-left">
          <source
            type="image/webp"
            srcset="images/easy.webp 1x, images/[email protected] 2x"
          />
          <source
            type="image/jpg"
            srcset="images/easy.jpg 1x, images/[email protected] 2x"
          />
          <img class="feature__image" src="images/easy.jpg" alt="" />
        </picture>
      </article>
    
      <article class="grid grid--1x2 feature">
        <div class="feature__content" data-aos="fade-left">
          <span class="icon-container">
            <svg class="icon icon--primary">
              <use xlink:href="images/sprite.svg#computer"></use>
            </svg>
          </span>
          <h3 class="feature__heading">Simply Fast Websites</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum
            voluptatibus iusto natus pariatur dolore vero quidem commodi, voluptatum
            dolor eius?
          </p>
          <a href="#" class="link-arrow">Learn More</a>
        </div>
        <picture data-aos="fade-right">
          <source
            type="image/webp"
            srcset="images/fast.webp 1x, images/[email protected] 2x"
          />
          <source
            type="image/jpg"
            srcset="images/fast.jpg 1x, images/[email protected] 2x"
          />
          <img class="feature__image" src="images/fast.jpg" alt="" />
        </picture>
      </article>
    
      <article class="grid grid--1x2 feature">
        <div class="feature__content" data-aos="fade-right">
          <span class="icon-container">
            <svg class="icon icon--primary">
              <use xlink:href="images/sprite.svg#settings"></use>
            </svg>
          </span>
          <h3 class="feature__heading">WordPress Made Easy</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum
            voluptatibus iusto natus pariatur dolore vero quidem commodi, voluptatum
            dolor eius?
          </p>
          <a href="#" class="link-arrow">Learn More</a>
        </div>
        <picture data-aos="fade-left">
          <source
            type="image/webp"
            srcset="images/wordpress.webp 1x, images/[email protected] 2x"
          />
          <source
            type="image/jpg"
            srcset="images/wordpress.jpg 1x, images/[email protected] 2x"
          />
          <img class="feature__image" src="images/wordpress.jpg" alt="" />
        </picture>
      </article>
    
      <article class="grid grid--1x2 feature">
        <div class="feature__content" data-aos="fade-left">
          <span class="icon-container">
            <svg class="icon icon--primary">
              <use xlink:href="images/sprite.svg#clock"></use>
            </svg>
          </span>
          <h3 class="feature__heading">24/7 Expert Support</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum
            voluptatibus iusto natus pariatur dolore vero quidem commodi, voluptatum
            dolor eius?
          </p>
          <a href="#" class="link-arrow">Learn More</a>
        </div>
        <picture data-aos="fade-right">
          <source
            type="image/webp"
            srcset="images/support.webp 1x, images/[email protected] 2x"
          />
          <source
            type="image/jpg"
            srcset="images/support.jpg 1x, images/[email protected] 2x"
          />
          <img class="feature__image" src="images/support.jpg" alt="" />
        </picture>
      </article>
    </section>
    <section class="block block--dark block--skewed-right block-showcase">
      <header class="block__header" data-aos="fade-up">
        <h2>User-friendly Control Panel</h2>
      </header>
      <div class="container">
        <div class="grid grid--1x2">
          <picture class="block-showcase__image" data-aos="zoom-in-up">
            <source
              type="image/webp"
              srcset="images/ipad.webp 1x, images/[email protected] 2x"
            />
            <source
              type="image/png"
              srcset="images/ipad.png 1x, images/[email protected] 2x"
            />
            <img src="images/ipad.png" alt="" />
          </picture>
          <ul class="list block-showcase__list" data-aos="zoom-in-up">
            <li>
              <div class="media">
                <div class="media__image">
                  <svg class="icon icon--primary">
                    <use xlink:href="images/sprite.svg#snap"></use>
                  </svg>
                </div>
                <div class="media__body">
                  <h3 class="media__title block__heading">
                    Easy Start & Managed Updates
                  </h3>
                  <p class="media__content">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate
                    vitae explicabo cum omnis sequi similique cupiditate culpa tempore
                    atque voluptatibus.
                  </p>
                </div>
              </div>
            </li>
            <li>
              <div class="media">
                <div class="media__image">
                  <svg class="icon icon--primary">
                    <use xlink:href="images/sprite.svg#growth"></use>
                  </svg>
                </div>
                <div class="media__body">
                  <h3 class="media__title block__heading">Staging, Git & WP-CLI</h3>
                  <p class="media__content">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate
                    vitae explicabo cum omnis sequi similique cupiditate culpa tempore
                    atque voluptatibus.
                  </p>
                </div>
              </div>
            </li>
            <li>
              <div class="media">
                <div class="media__image">
                  <svg class="icon icon--primary">
                    <use xlink:href="images/sprite.svg#wordpress"></use>
                  </svg>
                </div>
                <div class="media__body">
                  <h3 class="media__title block__heading">Dynamic Caching & More</h3>
                  <p class="media__content">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate
                    vitae explicabo cum omnis sequi similique cupiditate culpa tempore
                    atque voluptatibus.
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <section class="block">
      <header class="block__header" data-aos="fade-up">
        <h2>What our Customer are Saying</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, velit
          incidunt a perspiciatis facere quis.
        </p>
      </header>
      <div class="container">
        <div class="card testimonial card--testimonial">
          <div class="grid grid--1x2">
            <div class="testimonial__image" data-aos="fade-right">
              <img src="images/testimonial.jpg" alt="A happy, smiling" />
              <span class="icon-container icon-container--accent">
                <svg class="icon icon--white icon--small">
                  <use xlink:href="images/sprite.svg#quotes"></use>
                </svg>
              </span>
            </div>
            <blockquote class="quote" data-aos="fade-left">
              <p class="quote__text">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem
                debitis quidem aspernatur tempora. Ex veniam, tenetur eius nostrum
                temporibus nemo!
              </p>
              <footer class="quote__footer">
                <div class="media">
                  <div class="media__image">
                    <svg class="icon icon--primary quote__line">
                      <use xlink:href="images/sprite.svg#line"></use>
                    </svg>
                  </div>
                  <div class="media__body">
                    <h3 class="media__title quote__author">Jim Harris</h3>
                    <p class="quote__organization">Leaf Ninja Corp</p>
                  </div>
                </div>
              </footer>
            </blockquote>
          </div>
        </div>
      </div>
      
    </section>
    <section class="callout-block">
      <div class="block container">
        <div class="callout callout--primary" data-aos="slide-up">
          <div class="grid grid--1x2">
            <div class="callout__content">
              <h2 class="callout__heading">Ready to Get Started?</h2>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
                corporis totam expedita nam doloribus eaque ut aliquid ipsa libero
                architecto.
              </p>
            </div>
            <a href="#" class="btn btn--secondary btn--stretched btn--small">Get Started</a>
          </div>
        </div>
      </div>
    </section>
    <footer class="block block--dark footer">
      <div class="container grid footer__sections" >
        <section class="collapsible collapsible--expanded footer__section">
          <header class="collapsible__header">
            <h2 class="collapsible__heading footer__heading">Products</h2>
  
            <svg class="icon icon--white collapsible__chevron">
              <use xlink:href="images/sprite.svg#chevron"></use>
            </svg>
          </header>
          <div class="collapsible__content">
            <ul class="list ">
              <li><a href="">Free Automated WordPress</a></li>
              <li><a href="">Migrations</a></li>
              <li><a href="">Domain Names</a></li>
              <li><a href="">Web Hosting</a></li>
            </ul>
          </div>
        </section>
  
        <section class="collapsible footer__section">
          <header class="collapsible__header">
            <h2 class="collapsible__heading footer__heading">Company</h2>
  
            <svg class="icon icon--white collapsible__chevron">
              <use xlink:href="images/sprite.svg#chevron"></use>
            </svg>
          </header>
          <div class="collapsible__content">
            <ul class="list">
              <li><a href="">About</a></li>
              <li><a href="">Affiliates</a></li>
              <li><a href="">Blog</a></li>
            </ul>
          </div>
        </section>
        <section class="collapsible footer__section">
          <header class="collapsible__header">
            <h2 class="collapsible__heading footer__heading">Support</h2>
  
            <svg class="icon icon--white collapsible__chevron">
              <use xlink:href="images/sprite.svg#chevron"></use>
            </svg>
          </header>
          <div class="collapsible__content">
            <ul class="list">
              <li><a href="">Contact</a></li>
              <li><a href="">Acknowledge Base</a></li>
              <li><a href="">FAQ</a></li>
            </ul>
          </div>
        </section>
        

        <section class="collapsible footer__section">
          <header class="collapsible__header">
            <h2 class="collapsible__heading footer__heading">Domains</h2>
  
            <svg class="icon icon--white collapsible__chevron">
              <use xlink:href="images/sprite.svg#chevron"></use>
            </svg>
          </header>
          <div class="collapsible__content">
            <ul class="list">
              <li><a href="">Domain Checker</a></li>
              <li><a href="">Domain Transfer</a></li>
              <li><a href=""></a>Free Domain</a></li>
            </ul>
          </div>
        </section>
        <section class="footer__brand">
          <a href="#"><img src="images/logo.svg" alt="Moshify Logo" /> </a>
          <p class="footer__copyright">Copyright 2020 Hamedani</p>
        </section>
      </div>
    </footer>

    <script src="js/main.js"></script>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
      AOS.init();
    </script>
  </body>
</html>

[techabie]

[theorion]

I’ve had issues with the animate on scroll library with some browsers and seen many others have too, so i no longer use it. Here is a solution that worked for someone but personally after hours and hours there was no fix. Just a reminder that relying on libraries too much is fundamentally flawed, and it’s a kind of job security for web devs lol.

Id test it by removing the scroll effect and seeing if that fixes the problem, then you have an idea you need not tweak anything else. If it doesn’t fix, turn off other effects or classes and troubleshoot like that. Find then fix.

This worked for some
<meta name="viewport" content="width=device-width, initial-scale=1.0"> .

Lesson 39 - Animations, horizontal scroll bar

Has anyone else had an issue with the horizontal scroll bar appearing after adding animations in this lesson? Here’s the fix I found online: html { overflow-x: hidden; max-width: 100%; } This works, but I do wonder if the extra space was caused by an error in my code.

[URMine4Ever]

I think it has to do with the width not matching with the block underneath creating an overflow. The animation also make the horizontal scroll expend.

you can fix it by hiding the overflow-x

html, body{
overflow-x: hidden;
}

It solves the problem but I am not sure what it breaks so please do additional testing to see if everything else seems right.

[techabie]

Thank you. The problem is solved with
html, body{ overflow-x: hidden; }