У меня странная белая линия в правой части страницы

Question

Документ выглядит странно белой линией справа от страницы. Вся моя ширина равна 100% или с полем для центрирования, но эта линия уже здесь, и я не могу понять, почему. Я сею в другую часть стека переполнения, что position:relative проблема в панели навигации или других элементах в HTML, но я пытаюсь просто удалить их, но это не решает проблему. В конце концов, как я могу удалить эту строку?

/* Global */

@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.colored {
  color: #e86c00;
}


/* Local */


/* navigation bar */

#headNavigation {
  display: block;
  height: 110px;
  width: 100%;
  background: #222;
}

ul {
  margin: 0;
  padding: 0;
  text-align: center;
  list-style-type: none;
  position: relative;
  bottom: 50px;
}

ul li {
  display: inline-block;
  padding: 25px 20px 0 20px;
  text-align: center;
  opacity: 0.2;
  position: relative;
  bottom: 20px;
  left: 20%;
}

ul li a {
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fff;
}

nav h1 {
  color: #fff;
  position: relative;
  top: 30px;
  left: 30px;
}

.bi {
  display: block;
  margin: 10px auto;
}

ul li:hover,
ul li:hover .menu-title {
  opacity: 1;
  color: #e86c00;
}

.active a {
  color: #e86c00;
}

.active {
  opacity: 1;
}


/* section with photos */

.slider {
  position: relative;
  overflow: hidden;
  height: 80vh;
  width: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.content {
  position: absolute;
  bottom: 70px;
  left: -600px;
  opacity: 0;
  width: 600px;
  background-color: rgba(255, 255, 255, 0.6);
  color: #333;
  padding: 35px;
}

.slide .content h1 {
  margin-bottom: 10px;
}

.slide.current .content {
  opacity: 1;
  transform: translateX(600px);
  transition: all 0.7s ease-in-out 0.3s;
}

.buttons button#next {
  position: absolute;
  top: 50%;
  right: 15px;
}

.buttons button#prev {
  position: absolute;
  top: 50%;
  left: 15px;
}

.buttons button {
  border: 2px solid #fff;
  background-color: transparent;
  color: #fff;
  padding: 10px 12px;
  border-radius: 50%;
  outline: none;
}

.buttons button:hover {
  background-color: #fff;
  color: #333;
}

.slide.current {
  opacity: 1;
}

.slide:first-child {
  background: url(../photos/pic1.jpg) no-repeat center center/cover;
}

.slide:nth-child(2) {
  background: url(../photos/pic8.jpg) no-repeat center center/cover;
}

.slide:nth-child(3) {
  background: url(../photos/pic3.jpg) no-repeat center center/cover;
}

.slide:nth-child(4) {
  background: url(../photos/pic7.jpg) no-repeat center center/cover;
}

.slide:nth-child(5) {
  background: url(../photos/pic5.jpg) no-repeat center center/cover;
}

.slide:nth-child(6) {
  background: url(../photos/pic6.jpg) no-repeat center center/cover;
}


/* artivle for subscribe */

.sub {
  height: 150px;
  width: 100%;
  color: #fff;
  background-color: #222222;
}

#subscribeForm {
  float: right;
}

#subscribeForm input[type="email"] {
  height: 40px;
  width: 350px;
  position: relative;
  right: 150px;
  border: none;
  text-align: center;
}

#subscribeForm input[type="submit"] {
  height: 45px;
  width: 150px;
  position: relative;
  right: 140px;
  background-color: #eb4034;
  border: none;
  color: #fff;
}

.sub h1 {
  position: relative;
  top: 50px;
  left: 25px;
}


/* article with courses */

.courses {
  position: relative;
  overflow: hidden;
  height: auto;
  width: 100%;
  text-align: center;
}

.course {
  display: block;
  height: 250px;
  width: 30%;
  float: left;
  margin: 60px 0 50px 35px;
}

.courseImage {
  display: block;
  height: 150px;
  width: 60%;
  margin: 0 auto 15px;
}

.course a {
  text-decoration: none;
  color: #e86c00;
}


/* Created by JS */

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script src="https://kit.fontawesome.com/839b1040bb.js" crossorigin="anonymous"></script>

<header>
  <nav id="headNavigation">
    <h1>
      Be
      <span data-name="[positive , motivated]" data-wait="3000" class="colored">creative</span
              >
            </h1>
            <ul>
              <li class="active">
                <svg
                  class="bi bi-house"
                  width="2em"
                  height="2em"
                  viewBox="0 0 16 16"
                  fill="#fff"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2 13.5V7h1v6.5a.5.5 0 00.5.5h9a.5.5 0 00.5-.5V7h1v6.5a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 012 13.5zm11-11V6l-2-2V2.5a.5.5 0 01.5-.5h1a.5.5 0 01.5.5z"
                    clip-rule="evenodd"
                  />
                  <path
                    fill-rule="evenodd"
                    d="M7.293 1.5a1 1 0 011.414 0l6.647 6.646a.5.5 0 01-.708.708L8 2.207 1.354 8.854a.5.5 0 11-.708-.708L7.293 1.5z"
                    clip-rule="evenodd"
                  />
                </svg>
                <a href="#">Home</a>
              </li>
    
              <li>
                <svg
                  class="bi bi-eject"
                  width="2em"
                  height="2em"
                  viewBox="0 0 16 16"
                  fill="#fff"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M7.27 1.047a1 1 0 011.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H1.656C.78 9.5.326 8.455.926 7.816L7.27 1.047zM14.346 8.5L8 1.731 1.654 8.5h12.692zM.5 11.5a1 1 0 011-1h13a1 1 0 011 1v1a1 1 0 01-1 1h-13a1 1 0 01-1-1v-1zm14 0h-13v1h13v-1z"
                    clip-rule="evenodd"
                  />
                </svg>
                <a href="#" class="menu-title">About</a>
              </li>
              <li>
                <svg
                  class="bi bi-chat"
                  width="2em"
                  height="2em"
                  viewBox="0 0 16 16"
                  fill="#fff"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.678 11.894a1 1 0 01.287.801 10.97 10.97 0 01-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 01.71-.074A8.06 8.06 0 008 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 01-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 00.244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 01-2.347-.306c-.52.263-1.639.742-3.468 1.105z"
                    clip-rule="evenodd"
                  />
                </svg>
                <a href="#" class="menu-title">Feedback</a>
              </li>
              <li>
                <svg
                  class="bi bi-box-arrow-in-right"
                  width="2em"
                  height="2em"
                  viewBox="0 0 16 16"
                  fill="#fff"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M8.146 11.354a.5.5 0 010-.708L10.793 8 8.146 5.354a.5.5 0 11.708-.708l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0z"
                    clip-rule="evenodd"
                  />
                  <path
                    fill-rule="evenodd"
                    d="M1 8a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9A.5.5 0 011 8z"
                    clip-rule="evenodd"
                  />
                  <path
                    fill-rule="evenodd"
                    d="M13.5 14.5A1.5 1.5 0 0015 13V3a1.5 1.5 0 00-1.5-1.5h-8A1.5 1.5 0 004 3v1.5a.5.5 0 001 0V3a.5.5 0 01.5-.5h8a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-8A.5.5 0 015 13v-1.5a.5.5 0 00-1 0V13a1.5 1.5 0 001.5 1.5h8z"
                    clip-rule="evenodd"
                  />
                </svg>
                <a href="#" class="menu-title">Log In</a>
              </li>
            </ul>
          </nav>
          <div class="lighter"></div>
        </header>
    
        <section>
          <div class="slider">
            <div class="slide current">
              <div class="content">
                <h1>Henry Park</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
                  eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
                  sit amet, consectetur adipisicing elit. Perferendis, unde.
                </p>
              </div>
            </div>
            <div class="slide ">
              <div class="content">
                <h1>Peter Bottom(wizard)</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
                  eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
                  sit amet, consectetur adipisicing elit. Perferendis, unde.
                </p>
              </div>
            </div>
    
            <div class="slide ">
              <div class="content">
                <h1>Annie Granger</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
                  eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
                  sit amet, consectetur adipisicing elit. Perferendis, unde.
                </p>
              </div>
            </div>
    
            <div class="slide ">
              <div class="content">
                <h1>Miriam (Mitzi)</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
                  eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
                  sit amet, consectetur adipisicing elit. Perferendis, unde.
                </p>
              </div>
            </div>
            <div class="slide ">
              <div class="content">
                <h1>Julie Wothson</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
                  eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
                  sit amet, consectetur adipisicing elit. Perferendis, unde.
                </p>
              </div>
            </div>
            <div class="slide ">
              <div class="content">
                <h1>Mabel Tven</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
                  eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
                  sit amet, consectetur adipisicing elit. Perferendis, unde.
                </p>
              </div>
            </div>
          </div>
    
          <div class="buttons">
            <button id="prev"><i class="fas fa-arrow-left "></i></button>
            <button id="next"><i class="fas fa-arrow-right "></i></button>
          </div>
        </section>
    
        <article>
          <div class="sub">
            <h1>
              Please <span class="colored">Subscribe</span> for
      <span class="colored">our</span> site
    </h1>
    <form id="subscribeForm">
      <input type="email" name="Sub Email" id="SubEmail" placeholder="Enter Email" />
      <input type="submit" value="Submit" />
    </form>
    </div>
    </article>

    <article>
      <div class="container">
        <div class="courses">
          <div class="course">
            <div class="image">
              <img src="/photos/photoShop.png" alt="Adobe photoShop" class="courseImage" />
            </div>
            <a href="#">Photo Shop course</a>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
            </p>
          </div>
          <div class="course">
            <div class="image">
              <img src="/photos/photoEditingCourse.jpg" alt="Editing course" class="courseImage" />
            </div>
            <a href="#">Photo Editing Course</a>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
            </p>
          </div>
          <div class="course">
            <div class="image">
              <img src="/photos/beIntoPhoto.jpg" alt="be into" class="courseImage" />
            </div>
            <a href="#">Be into photo</a>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
            </p>
          </div>
          <div class="course">
            <div class="image">
              <img src="/photos/photoMarketing.jpg" alt="Photo Marketing" class="courseImage" />
            </div>
            <a href="#">Photo marketing with Ed Brand</a>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
            </p>
          </div>
          <div class="course">
            <div class="image">
              <img src="/photos/creativiy.jpg" alt="Creativity" class="courseImage" />
            </div>
            <a href="#">Creativity with Adam Bauman</a>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
            </p>
          </div>
        </div>
      </div>
    </article>

    <footer>
      <h5>NO COPYRIGHT &copy</h5>
      <div class="sectionOfPartners">
        <h6>Partners</h6>
        <p>Partner 1</p>
        <p>Partner 2</p>
        <p>Partner 3</p>
        <p>Partner 4</p>
        <p>Partner 5</p>
        <p>Partner 6</p>
        <p>Partner 7</p>
      </div>
      <div class="sectionOfContacts">
        <p>Oficial telephone +XXX / XXX XXXX</p>
        <p>Contact with workers +XXX / XXX XXXX</p>
        <p>Other Contacts <a href="#">Contact</a></p>
      </div>
    </footer>

Answer 1

Есть 2 заголовка (nav h1 & .sub h1), и у ul li есть проблема переполнения из-за относительной позиции.

nav h1 & .sub h1: left -> padding-left

ul li: удалить слева: 20%

/* Global */

@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.colored {
  color: #e86c00;
}


/* Local */


/* navigation bar */

#headNavigation {
  display: block;
  height: 110px;
  width: 100%;
  background: #222;
}

ul {
  margin: 0;
  padding: 0;
  text-align: center;
  list-style-type: none;
  position: relative;
  bottom: 50px;
}

ul li {
  display: inline-block;
  padding: 25px 20px 0 20px;
  text-align: center;
  opacity: 0.2;
  position: relative;
  bottom: 20px;
}

ul li a {
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fff;
}

nav h1 {
  color: #fff;
  position: relative;
  top: 30px;
  padding-left: 30px;
}

.bi {
  display: block;
  margin: 10px auto;
}

ul li:hover,
ul li:hover .menu-title {
  opacity: 1;
  color: #e86c00;
}

.active a {
  color: #e86c00;
}

.active {
  opacity: 1;
}


/* section with photos */

.slider {
  position: relative;
  overflow: hidden;
  height: 80vh;
  width: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.content {
  position: absolute;
  bottom: 70px;
  left: -600px;
  opacity: 0;
  width: 600px;
  background-color: rgba(255, 255, 255, 0.6);
  color: #333;
  padding: 35px;
}

.slide .content h1 {
  margin-bottom: 10px;
}

.slide.current .content {
  opacity: 1;
  transform: translateX(600px);
  transition: all 0.7s ease-in-out 0.3s;
}

.buttons button#next {
  position: absolute;
  top: 50%;
  right: 15px;
}

.buttons button#prev {
  position: absolute;
  top: 50%;
  left: 15px;
}

.buttons button {
  border: 2px solid #fff;
  background-color: transparent;
  color: #fff;
  padding: 10px 12px;
  border-radius: 50%;
  outline: none;
}

.buttons button:hover {
  background-color: #fff;
  color: #333;
}

.slide.current {
  opacity: 1;
}

.slide:first-child {
  background: url(../photos/pic1.jpg) no-repeat center center/cover;
}

.slide:nth-child(2) {
  background: url(../photos/pic8.jpg) no-repeat center center/cover;
}

.slide:nth-child(3) {
  background: url(../photos/pic3.jpg) no-repeat center center/cover;
}

.slide:nth-child(4) {
  background: url(../photos/pic7.jpg) no-repeat center center/cover;
}

.slide:nth-child(5) {
  background: url(../photos/pic5.jpg) no-repeat center center/cover;
}

.slide:nth-child(6) {
  background: url(../photos/pic6.jpg) no-repeat center center/cover;
}


/* artivle for subscribe */

.sub {
  height: 150px;
  width: 100%;
  color: #fff;
  background-color: #222222;
}

#subscribeForm {
  float: right;
}

#subscribeForm input[type="email"] {
  height: 40px;
  width: 350px;
  position: relative;
  right: 150px;
  border: none;
  text-align: center;
}

#subscribeForm input[type="submit"] {
  height: 45px;
  width: 150px;
  position: relative;
  right: 140px;
  background-color: #eb4034;
  border: none;
  color: #fff;
}

.sub h1 {
  position: relative;
  top: 50px;
  padding-left: 25px;
}


/* article with courses */

.courses {
  position: relative;
  overflow: hidden;
  height: auto;
  width: 100%;
  text-align: center;
}

.course {
  display: block;
  height: 250px;
  width: 30%;
  float: left;
  margin: 60px 0 50px 35px;
}

.courseImage {
  display: block;
  height: 150px;
  width: 60%;
  margin: 0 auto 15px;
}

.course a {
  text-decoration: none;
  color: #e86c00;
}


/* Created by JS */

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script src="https://kit.fontawesome.com/839b1040bb.js" crossorigin="anonymous"></script>

<header>
  <nav id="headNavigation">
    <h1>
      Be
      <span data-name="[positive , motivated]" data-wait="3000" class="colored">creative</span
              >
            </h1>
            <ul>
              <li class="active">
                <svg
                  class="bi bi-house"
                  width="2em"
                  height="2em"
                  viewBox="0 0 16 16"
                  fill="#fff"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2 13.5V7h1v6.5a.5.5 0 00.5.5h9a.5.5 0 00.5-.5V7h1v6.5a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 012 13.5zm11-11V6l-2-2V2.5a.5.5 0 01.5-.5h1a.5.5 0 01.5.5z"
                    clip-rule="evenodd"
                  />
                  <path
                    fill-rule="evenodd"
                    d="M7.293 1.5a1 1 0 011.414 0l6.647 6.646a.5.5 0 01-.708.708L8 2.207 1.354 8.854a.5.5 0 11-.708-.708L7.293 1.5z"
                    clip-rule="evenodd"
                  />
                </svg>
                <a href="#">Home</a>
              </li>
    
              <li>
                <svg
                  class="bi bi-eject"
                  width="2em"
                  height="2em"
                  viewBox="0 0 16 16"
                  fill="#fff"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M7.27 1.047a1 1 0 011.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H1.656C.78 9.5.326 8.455.926 7.816L7.27 1.047zM14.346 8.5L8 1.731 1.654 8.5h12.692zM.5 11.5a1 1 0 011-1h13a1 1 0 011 1v1a1 1 0 01-1 1h-13a1 1 0 01-1-1v-1zm14 0h-13v1h13v-1z"
                    clip-rule="evenodd"
                  />
                </svg>
                <a href="#" class="menu-title">About</a>
              </li>
              <li>
                <svg
                  class="bi bi-chat"
                  width="2em"
                  height="2em"
                  viewBox="0 0 16 16"
                  fill="#fff"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M2.678 11.894a1 1 0 01.287.801 10.97 10.97 0 01-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 01.71-.074A8.06 8.06 0 008 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 01-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 00.244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 01-2.347-.306c-.52.263-1.639.742-3.468 1.105z"
                    clip-rule="evenodd"
                  />
                </svg>
                <a href="#" class="menu-title">Feedback</a>
              </li>
              <li>
                <svg
                  class="bi bi-box-arrow-in-right"
                  width="2em"
                  height="2em"
                  viewBox="0 0 16 16"
                  fill="#fff"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M8.146 11.354a.5.5 0 010-.708L10.793 8 8.146 5.354a.5.5 0 11.708-.708l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0z"
                    clip-rule="evenodd"
                  />
                  <path
                    fill-rule="evenodd"
                    d="M1 8a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9A.5.5 0 011 8z"
                    clip-rule="evenodd"
                  />
                  <path
                    fill-rule="evenodd"
                    d="M13.5 14.5A1.5 1.5 0 0015 13V3a1.5 1.5 0 00-1.5-1.5h-8A1.5 1.5 0 004 3v1.5a.5.5 0 001 0V3a.5.5 0 01.5-.5h8a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-8A.5.5 0 015 13v-1.5a.5.5 0 00-1 0V13a1.5 1.5 0 001.5 1.5h8z"
                    clip-rule="evenodd"
                  />
                </svg>
                <a href="#" class="menu-title">Log In</a>
              </li>
            </ul>
          </nav>
          <div class="lighter"></div>
        </header>
    
        <section>
          <div class="slider">
            <div class="slide current">
              <div class="content">
                <h1>Henry Park</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
                  eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
                  sit amet, consectetur adipisicing elit. Perferendis, unde.
                </p>
              </div>
            </div>
            <div class="slide ">
              <div class="content">
                <h1>Peter Bottom(wizard)</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
                  eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
                  sit amet, consectetur adipisicing elit. Perferendis, unde.
                </p>
              </div>
            </div>
    
            <div class="slide ">
              <div class="content">
                <h1>Annie Granger</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
                  eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
                  sit amet, consectetur adipisicing elit. Perferendis, unde.
                </p>
              </div>
            </div>
    
            <div class="slide ">
              <div class="content">
                <h1>Miriam (Mitzi)</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
                  eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
                  sit amet, consectetur adipisicing elit. Perferendis, unde.
                </p>
              </div>
            </div>
            <div class="slide ">
              <div class="content">
                <h1>Julie Wothson</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
                  eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
                  sit amet, consectetur adipisicing elit. Perferendis, unde.
                </p>
              </div>
            </div>
            <div class="slide ">
              <div class="content">
                <h1>Mabel Tven</h1>
                <p>
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio,
                  eos quidem quia quis maiores provident suscipit Lorem ipsum dolor
                  sit amet, consectetur adipisicing elit. Perferendis, unde.
                </p>
              </div>
            </div>
          </div>
    
          <div class="buttons">
            <button id="prev"><i class="fas fa-arrow-left "></i></button>
            <button id="next"><i class="fas fa-arrow-right "></i></button>
          </div>
        </section>
    
        <article>
          <div class="sub">
            <h1>
              Please <span class="colored">Subscribe</span> for
      <span class="colored">our</span> site
    </h1>
    <form id="subscribeForm">
      <input type="email" name="Sub Email" id="SubEmail" placeholder="Enter Email" />
      <input type="submit" value="Submit" />
    </form>
    </div>
    </article>

    <article>
      <div class="container">
        <div class="courses">
          <div class="course">
            <div class="image">
              <img src="/photos/photoShop.png" alt="Adobe photoShop" class="courseImage" />
            </div>
            <a href="#">Photo Shop course</a>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
            </p>
          </div>
          <div class="course">
            <div class="image">
              <img src="/photos/photoEditingCourse.jpg" alt="Editing course" class="courseImage" />
            </div>
            <a href="#">Photo Editing Course</a>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
            </p>
          </div>
          <div class="course">
            <div class="image">
              <img src="/photos/beIntoPhoto.jpg" alt="be into" class="courseImage" />
            </div>
            <a href="#">Be into photo</a>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
            </p>
          </div>
          <div class="course">
            <div class="image">
              <img src="/photos/photoMarketing.jpg" alt="Photo Marketing" class="courseImage" />
            </div>
            <a href="#">Photo marketing with Ed Brand</a>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
            </p>
          </div>
          <div class="course">
            <div class="image">
              <img src="/photos/creativiy.jpg" alt="Creativity" class="courseImage" />
            </div>
            <a href="#">Creativity with Adam Bauman</a>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates minus nam ipsa vel libero tempore necessitatibus deserunt maiores amet laborum!
            </p>
          </div>
        </div>
      </div>
    </article>

    <footer>
      <h5>NO COPYRIGHT &copy</h5>
      <div class="sectionOfPartners">
        <h6>Partners</h6>
        <p>Partner 1</p>
        <p>Partner 2</p>
        <p>Partner 3</p>
        <p>Partner 4</p>
        <p>Partner 5</p>
        <p>Partner 6</p>
        <p>Partner 7</p>
      </div>
      <div class="sectionOfContacts">
        <p>Oficial telephone +XXX / XXX XXXX</p>
        <p>Contact with workers +XXX / XXX XXXX</p>
        <p>Other Contacts <a href="#">Contact</a></p>
      </div>
    </footer>