Page overflowing from the right margin - css

Question

This is my css code.
nav.navbar {
color: white !important;
background-color: #d82c2e;
font-weight: bold;
}
html {
margin-right: 70px !important;
}
.introSec {
height: 750px;
}
.hr {
width: 100px;
border-top: 1px solid red;
}
.navbar-flat li a:focus,
.navbar-flat li a:hover,
.navbar-flat li.active a,
.navbar-brand {
background-color: #c12728;
color: #fff;
}
.navbar-flat a {
transition: all .3s ease-in, 1s;
}
nav.navbar {
padding-left: 35%;
}
.nav-link {
color: #fff;
/*font-size:calc(15px + 0.6vw);*/
}
.navbar-brand {
color: white;
}
.introLine {
text-align: center;
padding-top: 30px;
font-size: calc(15px + 0.6vw);
}
.pieImage {
border-radius: 100%;
margin: 40px 45%;
height: calc(20% + 0.6vw);
min-width: calc(13% + 0.6vw);
}
.pieImage2 {
border-radius: 100%;
margin-top: 20px;
width: 300px !important;
height: 600;
display: inline-block;
}
.coolOne {
margin-left: 17%;
}
#landing-header {
margin-top: -80px;
}
.myName {
text-align: center;
color: white;
font-family: Lato, sans-serif;
letter-spacing: -2px;
}
.title {
text-align: center;
color: black;
word-spacing: 3px;
padding: 10px;
margin: 15px auto;
font-family: 'Pontano Sans', sans-serif;
font-size: calc(30px + 0.6vw);
}
.firstSec {
background-color: #d82c2e;
height: 725px;
}
.aboutTitle {
text-align: center;
color: #d82c2e;
font-family: Lato, sans-serif;
font-weight: 700;
font-size: 30px;
}
.firstSec {
margin-top: 57px;
}
.aboutIntro {
text-align: center;
font-family: Lato, sans-serif;
}
.aboutMe {
padding: 20px 90px 0 90px;
}
.activities-inner {
padding-top: 50px;
margin: 50px;
width: 100%;
}
.activities {
border: 1px solid #e3e5e5;
display: inline;
padding: 50px;
}
.column {
float: left;
width: 25%;
border: 1px solid lightgray;
height: 200px;
text-align: center;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
font-weight: 500;
font-size: 30px;
padding-top: 30px;
}
.icon {
font-size: 40px;
color: #d82c2e;
}
.technicalSkills {
text-align: center;
font-family: Lato, sans-serif;
}
.thirdSec {
background-color: #d82c2e;
}
.technicalSkills {
margin-top: 50px;
color: white;
padding-top: 20px;
}
.portfolioHeading {
text-align: center;
color: #d82c2e;
font-weight: 700;
font-family: 700;
font-size: 30px;
}
.hr {
margin-top: 20px;
color: #d82c2e;
}
.portfolioPic {
margin: 20px 35%;
width: 30%;
}
.text-center {
display: flex;
flex-wrap: wrap;
}
.lastHr {
float: left;
}
.contact {
text-align: center;
}
.lastSec {
background-color: #d82c2e;
margin-top: 20px;
}
.contactDetails {
padding-top: 20px;
}
.white {
color: white;
}
.space {
padding-top: 5px;
}
.row {
padding-left: 100px;
padding-right: 130px;
}
.dev {
font-size: calc(18px + 1.0vw);
}
.secondDev {
font-size: calc(15px + 0.6vw);
}
#landing-header {
z-index: 1;
position: relative;
text-align: center;
padding-top: 40vh;
}
#landing-header h1 {
color: #fff;
}
.slideshow {
position: inherit;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
list-style: none;
margin: 0;
margin-top: -23.1%;
padding: 0;
}
.slideshow li {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0;
z-index: 0;
animation: imageAnimation 50s linear infinite;
}
.slideshow li:nth-child(1) {
background-image: url(https://bearlake.org/wp-
content/uploads/cache/images/garden-city-logan-campgrounds/garden-city-logan-campgrounds-987998613.jpg)
}
.slideshow li:nth-child(2) {
background-image: url(https://bearlake.org/wp-content/uploads/cache/images/garden-city-logan-campgrounds/garden-city-logan-campgrounds-987998613.jpg);
animation-delay: 10s;
}
.slideshow li:nth-child(3) {
background-image: url(https://bearlake.org/wp-content/uploads/cache/images/garden-city-logan-campgrounds/garden-city-logan-campgrounds-987998613.jpg);
animation-delay: 20s;
}
.slideshow li:nth-child(4) {
background-image: url(https://bearlake.org/wp-content/uploads/cache/images/garden-city-logan-campgrounds/garden-city-logan-campgrounds-987998613.jpg);
animation-delay: 30s;
}
.slideshow li:nth-child(5) {
background-image: url(https://bearlake.org/wp-content/uploads/cache/images/garden-city-logan-campgrounds/garden-city-logan-campgrounds-987998613.jpg);
animation-delay: 40s;
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
10% {
opacity: 1;
animation-timing-function: ease-out;
}
20% {
opacity: 1
}
30% {
opacity: 0
}
}
.no-cssanimations .slideshow li {
opacity: 1;
}
.nav-link {
color: white !important;
}
.navbar-toggler {
border-color: white;
/*margin-left: -50%;*/
}
.navbar-fixed-top {
top: 0;
}
.navbar-light .navbar-toggler {
border-color: transparent !important;
}
<div class="row">
<div class="column col-lg-3 col-md-6 col-sm-12">
<p class="icon">
<i class="fas fa-code"> </i> </p>
<h3 class="dev"> DEVELOPMENT </h3>
</div>
<div class="column col-lg-3 col-md-6 col-sm-12">
<p class="icon">
<i class="fas fa-music"></i>
</p>
<h3 class="dev"> MUSIC </h3>
</div>
<div class="column col-lg-3 col-md-6 col-sm-12">
<p class="icon">
<i class="fas fa-basketball-ball"></i>
</p>
<h3 class="dev"> TENNIS </h3>
</div>
<div class="column col-lg-3 col-md-6 col-sm-12">
<p class="icon">
<i class="fas fa-book"></i>
</p>
<h3 class="dev"> BOOKS </h3>
</div>
</div>
</div>
<div id="scrollToThird">
</section>
<!-- Third Sec Starts here -->
<section class="thirdSec">
<h2 class="technicalSkills"> TECHNICAL SKILLS </h2>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol id="scrollToFourth" class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active coolOne">
<img class="pieImage2 col-lg-4 col-md-4 col-sm-12" src="./htmlPercent2.jpg">
<img class="pieImage2 col-lg-4 col-md-4 col-sm-12" src="./cssPercent2.jpg">
<img class="pieImage2 col-lg-4 col-md-4 col-sm-12" src="./javascriptPercent2.jpg">
</div>
<div class="carousel-item coolOne">
<img class="pieImage2 col-lg-4 col-md-4 col-sm-12" src="./nodejsPercent2.jpg">
<img class="pieImage2 col-lg-4 col-md-4 col-sm-12" src="./expressPercent2.jpg">
<img class="pieImage2 col-lg-4 col-md-4 col-sm-12" src="./javascriptPercent2.jpg">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
</div>
<section class="fourthSec">
<hr class="hr">
<h2 class="portfolioHeading"> PORTFOLIO </h2>
<div class="container">
<div class="row text-center" style="display:flex; flex-wrap: wrap;">
<div class="col-lg-4 col-md-6">
<div class="img-thumbnail">
<img src="./screencapture-lit-mesa-98519-herokuapp-1518954523255.png" class="img-fluid">
<div class="caption">
<h4 class="secondDev"> Yelp Camp</h4>
</div>
Check it out!
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="img-thumbnail">
<img src="./screencapture-dry-castle-83141-herokuapp-blogs-1519047247719.png" class="img-fluid">
<div class="caption">
<h4 class="secondDev"> Blog Site</h4>
</div>
Check it out!
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="img-thumbnail">
<img src="./screencapture-whispering-hamlet-69416-herokuapp-results-1519112901364.png" class="img-fluid">
<div class="caption">
<h4 class="secondDev"> Seach Any Movie</h4>
</div>
Check it out!
</div>
</div>
<div class="space col-lg-4 col-md-6">
<div class="img-thumbnail">
<img src="./IMG_3717.PNG" width="80" class="img-fluid">
<div class="caption">
<h4 class="secondDev"> 101 WeirdFunFacts </h4>
</div>
Check it out!
</div>
</div>
<div class="space col-lg-4 col-md-6">
<div class="img-thumbnail">
<img src="./IMG_3718.PNG" width="80" class="img-fluid">
<div class="caption">
<h4 class="secondDev"> Flash Card</h4>
</div>
Check it out!
</div>
</div>
<div class="space col-lg-4 col-md-6">
<div class="img-thumbnail">
<img src="./IMG_3719.PNG" width="80" class="img-fluid">
<div class="caption">
<h4 class="secondDev"> Algebraic Equations </h4>
</div>
Check it out!
<div id="scrollToFifth">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="lastSec">
<h2 class="contactDetails"> CONTACT DETAILS </h2>
<hr class="col-lg-4 col-md-4 col-sm-4 col-xs-2 lastHr">
<br>
<br>
<div class="contact">
<h5 class="white"> Email: </h5>
<p> —————————————— </p>
<h5 class="white"> Contact Number: </h5>
<p> ——————————— </p>
<h5 class="white"> Address: </h5>
<p> ———————————— </p>
</div>
</section>
<p> assasa </p>
<p> assasa </p>
<p> assasa </p>
<p> assasa </p>
<p> assasa </p>
<p> assasa </p>
<p> assasa </p>
<p> assasa </p>
<p> assasa </p>
<% include partials/footer %>
<% include partials/header %>
<section class="introSec">
<!--<div id="landing-header">-->
<div id="landing-header">
<h1>Hi, I am Neymat Kakar</h1>
<h4> Web/IOS Developer In Dubai </h4>
</div>
<ul class="slideshow">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
<div id="scrollTo">
<section class="firstSec">
<nav class="navbar navbar-expand-lg navbar-flat navbar-light">
<!--<a class="navbar-brand" href="#srcollTo">HOME </a>-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#scrollTo">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollToSec">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollToThird">SKILLS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollToFourth">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollToFifth">CONTACT</a>
</li>
</ul>
</div>
</nav>
<img class="pieImage" src="./IMG_8224.jpg">
<h1 class="myName"> NEYMAT KAKAR </h1>
<h3 class="introLine"> CREATIVE - PROFESSIONAL - PASSIONATE</h3>
<h5 class="col-lg-12 col-md-12 col-sm-12 col-xs-12 title"> WEB/IOS APP DEVELOPER</h5>
<div id="scrollToSec">
</section>
</div>
<!-- Second Section Starts Below -->
<section class="secSec">
<hr class="hr">
<h3 class="aboutTitle"> HERE'S WHAT I'M DOING </h3>
<!--<p class = "aboutIntro"> I introduce the most creative and original ideas for my company </p>-->
<p class="aboutMe"> “I am a simple person with great passion for web development. I have been in the field now for quite some time, and have been loving every minute of it. I am also a part-time blogger and avid reader of non-fiction and overall thinker. I also enjoy
going out to local meetups, events and descent clubs to interact with people from various walks of life.” </p>
Please go through the image. This is how my page looks like.
Notice from navbar section, the margin on the right is way out. I need all the sections to have the same margin and the page not to overflow.

Answer 1

I think problem with your html and body margin. Remove margin-right to your html to tag.
Try to set below css
html,body {
width: 100%;
height: 100%;
margin: 0;
padding:0;
overflow-x:hidden;
}
Inside the html if you're using bootstrap go-through about bootstrap container class to get left and right space.