removing horizontal scrolling bar - html

Question

How do I get rid of this white space (in the picture below). I have tried putting the margin 0px with the universal selector but nothing changed(with the big space in the right). I have tried to change the units from px to vhor vw or rembut nothing changed.
Here is my code:
*{
margin: 0;
box-sizing: border-box;
padding: 0;
font-family: 'Roboto', sans-serif;
}
/*header section*/
.container{
display:flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: absolute;
z-index: 1;
width: 100vw;
font-weight: bold;
text-transform: uppercase;
}
.logo-box{
position: relative;
left:10px;
}
.logo{
width: 100px;
}
.main-nav__item{
list-style-type: none;
color: white;
}
.main-nav__item:hover{
color: #ff9900;
cursor: pointer;
}
/*84.2*/
.slideshow-container{
width: 100vw;
position: relative;
margin: auto;
}
.img{
width: 100%;
height: 98vh;
}
.dotz{
height: 2px;
text-align: center;
}
.dot {
position: relative;
top: -30px;
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 20px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active{
background-color: #ff9900;
}
.dot:hover {
background-color: #ff9900;
}
/* Fading animation */
.fade-zz {
-webkit-animation-name: fade-z;
-webkit-animation-duration: 1.5s;
animation-name: fade-z;
animation-duration: 1.5s;
}
#keyframes fade-z {
from {opacity: .4}
to {opacity: 1}
}
/*//////////the end of the header///////////////////*/
/* styling icons */
.icon{
font-size: 2.5rem;
}
.ad{
margin-left: 80px;
margin-bottom: 3px
}
.rot{
transform: rotateZ(-33deg);
margin: 0 0 0.31rem 1.87rem ;
}
.op{
margin-left: 3.12rem;
}
.contact-description{
text-align: center;
font-weight: bold;
font-size: 0.81rem;
}
/*end styling icons */
/* contact-box title */
.contact-title{
text-align: center;
font-weight: bold;
margin-bottom: 0.18rem;
}
.contact-box{
display: flex;
justify-content: space-around;
align-items: center;
background-color: #ff0000;
height: 180px;
position: relative;
top: -6px;
color: white;
}
/* about us section*/
.title{
text-align: center;
}
.title-description{
text-align: center;
color: #ff9900;
font-weight: bold;
margin-bottom: 50px;
}
.title-description:hover{
color: black;
}
.line{
position: relative;
left: 650px;
width: 50px;
height: 5px;
text-align: center;
background-color: #ff9900;
border: 0px;
margin-bottom: 10px;
}
/* service section */
.service-image-box{
width: 100%;
height: 50%;
}
.service-image{
width: 100%;
}
.title-service{
font-size: 70px;
position: relative;
top: 9rem;
text-align: center;
color: white;
}
.quality-cuisine-box{
position: relative;
top: 10rem;
height: 0.1px;
left:19rem;
width: 1366px;
}
.hover:hover{
color: #ff9900;
}
.qu{
margin-left: 3rem;
color: white;
}
.service-title{
color: white;
}
.service-description{
color: white;
}
<div class="container">
<div class="logo-box">
<img src="images/logo.png" class="logo" alt="">
</div>
<ul class="main-nav__item">
<li>services</li>
</ul>
<ul class="main-nav__item">
<li>reservation</li>
</ul>
<ul class="main-nav__item">
<li>menu</li>
</ul>
<ul class="main-nav__item">
<li>our chefs</li>
</ul>
<ul class="main-nav__item">
<li>events</li>
</ul>
</div>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade-zz">
<!-- <div class="numbertext">1 / 3</div> -->
<img src="https://via.placeholder.com/1000" class="img">
<!-- <div class="text">Caption Text</div> -->
</div>
<div class="mySlides fade-zz">
<!-- <div class="numbertext">2 / 3</div> -->
<img src="https://via.placeholder.com/1000" class="img">
<!-- <div class="text">Caption Two</div> -->
</div>
<div class="mySlides fade-zz">
<!-- <div class="numbertext">3/3</div> -->
<img src="https://via.placeholder.com/1000" class="img">
<!-- <div class="text">Caption Three</div> -->
</div>
<!-- The dots/circles -->
<div class="dotz">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!--end of the slideshow-->
<!--contact box-->
<div class="contact-box">
<div class="adress">
<i class="fas fa-map-marker-alt icon ad"></i>
<h3 class="contact-title">Address</h3>
<p class="contact-description">4579 Penn Street,Manchester<br>united kingdom</p>
</div>
<div class="phone">
<i class="fas fa-phone-volume icon rot"></i>
<h3 class="contact-title">Phone</h3>
<p class="contact-description">636-399-9776 <br> 573-225-7350</p>
</div>
<div class="opening-time">
<i class="far fa-clock icon op"></i>
<h3 class="contact-title">Opening time</h3>
<p class="contact-description">all the days of the week <br>from 6 am to midnight</p>
</div>
</div>
<!-- about us section -->
<section class="about-us">
</div>
<i class="fas fa-utensils"></i>
<h1 class="title">about us</h1>
<hr class="line">
<p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page <br>avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années<br> 1500, quand un imprimeur
anonyme assembla </p>
</section>
<!-- service section -->
<section class="services">
<h1 class="title-service">
services
</h1>
<div class="quality-cuisine-box">
<i class="fas fa-concierge-bell icon qu"></i>
<h2 class="service-title">quality cuisine</h2>
<p class="service-description">Le Lorem Ipsum est <br>
simplement du faux
</p>
</div>
<!-- <div class="freindly-staff-box">
<i class="fas fa-smile-beam icon"></i>
<h2>freindly staff</h2>
<p>Le Lorem Ipsum est <br>
simplement du faux</p>
</div>
<div class="fresh-food-box">
<i class="fas fa-fish icon"></i>
<h2>fresh food</h2>
<p>Le Lorem Ipsum est <br>
simplement du faux</p>
</div> -->
<div class="service-image-box">
<img class="service-image" src="https://via.placeholder.com/1000" alt="">
</div>
</section>
this is an executable version of my code: https://codepen.io/AMeshu/pen/vvjgxg

Answer 1

A couple of problems on the fly:
You are using absolute sizes for position / measuring your elements. I changed the width property to max-width. Then in order to remove the scroll-x I set the body margin to 0.
.line – instead of left 650px I put right 0.
.main-nav__item - I don't know why, but you are using the unordered list element over and over. So I combine it to one, as you can see.
<style>
*{
margin: 0;
box-sizing: border-box;
padding: 0;
font-family: 'Roboto', sans-serif;
}
body {
margin: 0;
}
/* Header section */
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: absolute;
z-index: 1;
width: 100%;
font-weight: bold;
text-transform: uppercase;
}
.logo-box {
position: relative;
left: 10px;
}
.logo {
width: 100px;
}
.main-nav__item {
list-style-type: none;
}
.main-nav__item li {
float: left;
padding-right: 10px;
}
.main-nav__item li:hover {
color: #ff9900;
cursor: pointer;
}
/* 84.2 */ .slideshow-container {
max-width: 100vw;
position: relative;
margin: auto;
}
.img {
max-width: 100%;
height: 98vh;
}
.dotz {
height: 2px;
text-align: center;
}
.dot {
position: relative;
top: -30px;
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 20px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #ff9900;
}
.dot:hover {
background-color: #ff9900;
}
/* Fading animation */.fade-zz {
-webkit-animation-name: fade-z;
-webkit-animation-duration: 1.5s;
animation-name: fade-z;
animation-duration: 1.5s;
}
#keyframes fade-z {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* //////////The end of the header/////////////////// */
/* Styling icons */.icon {
font-size: 2.5rem;
}
.ad {
margin-left: 80px;
margin-bottom: 3px
}
.rot {
transform: rotateZ(-33deg);
margin: 0 0 0.31rem 1.87rem ;
}
.op {
margin-left: 3.12rem;
}
.contact-description {
text-align: center;
font-weight: bold;
font-size: 0.81rem;
} /* End styling icons */
/* contact-box title */.contact-title {
text-align: center;
font-weight: bold;
margin-bottom: 0.18rem;
}
.contact-box {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #ff0000;
height: 180px;
position: relative;
top: -6px;
color: white;
}
/* About us section*/.title {
text-align: center;
}
.title-description {
text-align: center;
color: #ff9900;
font-weight: bold;
margin-bottom: 50px;
}
.title-description:hover {
color: black;
}
.line {
position: relative;
right: 0px;
width: 50px;
height: 5px;
text-align: center;
background-color: #ff9900;
border: 0px;
margin-bottom: 10px;
}
/* Service section */
.service-image-box {
width: 100%;
height: 50%;
}
.service-image {
max-width: 100%;
}
.title-service {
font-size: 70px;
position: relative;
top: 9rem;
text-align: center;
color: white;
}
.quality-cuisine-box {
position: relative;
top: 10rem;
height: 0.1px;
/* left: 19rem; */
max-width: 1366px;
}
.hover:hover {
color: #ff9900;
}
.qu {
/* margin-left: 3rem; */
color: white;
}
.service-title {
color: white;
}
.service-description {
color: white;
}
</style>
Play with that pen and good luck!