When viewing on mobile strange line appears on the right side












2















I've made the website responsive, but when I'm on a mobile device or on a small screen a strange line appears on the rightimage of the screen






*

{

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}



html

{

	scroll-behavior: smooth;

}



body

{

	overflow-x: hidden;

	color: #505962;

    margin-top: 25px;

    font-size: 21px;

    text-align: center;



    -webkit-animation: fadein 2s;

       -moz-animation: fadein 2s;

        -ms-animation: fadein 2s;

         -o-animation: fadein 2s;

            animation: fadein 2s;

}



@keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Firefox < 16 */

@-moz-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Internet Explorer */

@-ms-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Opera < 12.1 */

@-o-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



.navbar

{

	text-transform: uppercase;

}



.navbar-brand

{

	height: 2.4rem;

}



.home-inner

{

	background-image: url('../img/imac-on-white-table.jpg');

	opacity: 0.3;

}



.caption

{

	width: 100%;

	position: absolute;

	top: 40%;

	z-index: 1;

}



.caption h3

{

	color: white;

	font-size: 2.4rem;

	padding-bottom: 2rem;

}



h3.heading

{

	text-align: center;

	font-size: 1.9rem;

	text-transform: uppercase;

	margin-bottom: 1.9rem;

}



.card

{

	margin: 2rem;

}



.card-img-top

{

	-webkit-filter: grayscale(90%);

	filter: grayscale(90%);

}



.footer .row

{

	background-color: #505962;

	padding: 1rem 2rem 3rem;

	color: #57C4DF;

}



.footer h3

{

	height: 2rem;

	margin: 1.5rem 0;

}



.sm

{

	font-size: 1.5rem;

	margin-top: .5rem;

	padding-left: .5rem;

}



.fa-facebook

{

	color: #2733D9;

}



.fa-linkedin

{

	color: #4875B4;

}



.fa-instagram

{

	color: #4E433C;

}



.fa:hover

{

	text-decoration: none;

}



.skillname

{

	margin-top: 1rem;

	margin-bottom: 0;

}





.skills

{

	width: 100%;

	background-color: #ddd;

	border-radius: 5px;

}







.skill

{

	text-align: right;

	padding: 10px;

	color: white;

	border-radius: 5px

}



@-webkit-keyframes animate-positive{

    0% { width: 0%; }

}

@keyframes animate-positive{

    0% { width: 0%; }

}



.html {width: 90%; background-color: #4CAF50;}

.css {width: 70%; background-color: #2196F3;}

.js {width: 80%; background-color: #B8860B;}

.symf {width: 65%; background-color: #32CD32;}

.php {width: 70%; background-color: #808080;}

.java {width: 40%; background-color: #FFA500;}



.landing

{

	position: relative;

	width: 100%;

	height: 100vh;

	display: table;

	background: #E9ECEF;

	z-index: -1;

}



.home-wrap

{

	clip: rect(0, auto, auto, 0);

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	margin: 0;

	padding: 0;

}



.home-inner

{

	position: fixed;

	display: table;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-size: cover;

	background-position: center center;

	-webkit-transform: translateZ(0);

			transform: translateZ(0);

	will-change: transform;

}

<!DOCTYPE html>

<html>

	<head>

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title> Dustin Timmermans </title>

		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

		<link href="https://fonts.googleapis.com/css?family=Lobster|Nunito+Sans|Pacifico|Righteous|Play" rel="stylesheet">

		<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

		<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

		<link rel="stylesheet" href="css/style.css">

	</head>

	<body data-target="#menu">

		<div id="home">

			<nav class="navbar navbar-dark bg-dark navbar-expand-md fixed-top">

				<div class="container-fluid">

					<a href="#" class="navbar-brand">Dustin Timmermans</a>

					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">

						<span class="navbar-toggler-icon"></span>

					</button>

					<div class="collapse navbar-collapse" id="menu">

						<ul class="navbar-nav ml-auto">

							<li class="nav-item">

								<a class="nav-link" href="#home">Home</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#about">About</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#hobbies">Hobbies</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#contact">Contact</a>

							</li>

						</ul>

					</div>

				</div>

			</nav>



			<div class="landing">

				<div class="home-wrap">

					<div class="home-inner">

					</div>

				</div>

			</div>



			<div class="caption center-block text-center">

				<h3 style="font-family: Pacifico;">Dustin Timmermans</h3>

				<h4 style="font-family: Righteous;">Portfolio</h4>

			</div>



			<div id="about">

				<div class="jumbotron">

					<h3 class="heading">About</h3>

					<div class="row">

						<div class="col-md-4 text-center">

							<h4>Who am I</h4>

							<p>My name is Dustin. Born in 1999 and living in the Hague. Currently I am a student Application and Mediadeveloper at <a href="https://www.rocmondriaan.nl/locatie-tinwerf-16">ROC Mondriaan</a>. I fluently speak and write English and Dutch. Also I am able

								to conversate in German.

							</p>

						</div>

						<div class="col-md-4 text-center">

							<h4>Skills</h4>

							<p class="progress">

								<p class="skillname">HTML5.0/TWIG</p>

								<div class="skills">

									<div class="skill html">90%</div>

								</div>

								<p class="skillname">CSS3.0</p>

								<div class="skills">

									<div class="skill css">70%</div>

								</div>

								<p class="skillname">JavaScript</p>

								<div class="skills">

									<div class="skill js">80%</div>

								</div>

								<p class="skillname">Symfony 3.4</p>

								<div class="skills">

									<div class="skill symf">65%</div>

								</div>

								<p class="skillname">PHP 7</p>

								<div class="skills">

									<div class="skill php">70%</div>

								</div>

								<p class="skillname">Java</p>

								<div class="skills">

									<div class="skill java">40%</div>

								</div>

							</p>

						</div>

						<div class="col-md-4 text-center">

							<h4>Why me</h4>

							<p>The reason why you should pick me as your next intern is, because when I learned to program, a whole new world opened up for me. I kept learning how to program and now I am able to make a fully animated, responsive and functional website.</p>

						</div>

					</div>

				</div>

			</div>



			<div id="hobbies">

				<h3 class="heading">Hobbies</h3>

				<div class="row padding">

					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/motor.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Motorcycle racing</h4>

								<p><i class="fa fa-quote-left"></i> I started racing on a motorcycle when I was 14 years old. I kept practicing and eventually I won the belgian championship. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>



					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/me.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Piano</h4>

								<p><i class="fa fa-quote-left"></i> I practice about 2 to 3 hours a day for almost 3 years now. When I am playing the piano it releases the tension. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>



					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/karten.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Karting</h4>

								<p><i class="fa fa-quote-left"></i> I started racing in a go-kart when I was 9 years old. I've competed in many championship and I've won several grand prix. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>

				</div>

			</div>



			<div id="contact">

				<div class="container-fluid footer">

					<div class="row">

						<div class="col-md-3"></div>

						<div class="col-md-6 text-center">

							<h3>Dustin Timmermans</h3>

							<p>If you would like to check me out on social, <a href="mailto:dustin993246@gmail.com" class="fa fa-address-card-o" target="_top"></a>.</p><br>

							<strong>Social Media</strong><br>

							<a href="https://www.facebook.com/dustin.timmermans.9" class="fa fa-facebook sm" target="_blank"></a>

							<a href="https://www.linkedin.com/in/dustin-timmermans-9a9421148/" class="fa fa-linkedin sm" target="_blank"></a>

							<a href="https://www.instagram.com/dustin_jt32/?hl=nl" class="fa fa-instagram sm" target="_blank"></a>

							<br><br>

							<p>© Copyright <a href="#" style="text-decoration: none;">Dustin Timmermans</a> 2018</p>

						</div>

					</div>

				</div>

			</div>



		</div>

	</body>

</html>





I tried multiple things, but I don't know how to solve the problem. I've never had such a problem and I can't find any similar problems or questions. There are no further problems with the code, this is the only problem I have






html5 css3 bootstrap-4







share|improve this question























  • Did you use element inspector to see if an element overlapses?

    – Midorikawa
    Jan 2 at 21:46











  • yes i did but nothing overlapsed

    – NLDCarbonFiber
    Jan 2 at 21:49
















2















I've made the website responsive, but when I'm on a mobile device or on a small screen a strange line appears on the rightimage of the screen






*

{

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}



html

{

	scroll-behavior: smooth;

}



body

{

	overflow-x: hidden;

	color: #505962;

    margin-top: 25px;

    font-size: 21px;

    text-align: center;



    -webkit-animation: fadein 2s;

       -moz-animation: fadein 2s;

        -ms-animation: fadein 2s;

         -o-animation: fadein 2s;

            animation: fadein 2s;

}



@keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Firefox < 16 */

@-moz-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Internet Explorer */

@-ms-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Opera < 12.1 */

@-o-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



.navbar

{

	text-transform: uppercase;

}



.navbar-brand

{

	height: 2.4rem;

}



.home-inner

{

	background-image: url('../img/imac-on-white-table.jpg');

	opacity: 0.3;

}



.caption

{

	width: 100%;

	position: absolute;

	top: 40%;

	z-index: 1;

}



.caption h3

{

	color: white;

	font-size: 2.4rem;

	padding-bottom: 2rem;

}



h3.heading

{

	text-align: center;

	font-size: 1.9rem;

	text-transform: uppercase;

	margin-bottom: 1.9rem;

}



.card

{

	margin: 2rem;

}



.card-img-top

{

	-webkit-filter: grayscale(90%);

	filter: grayscale(90%);

}



.footer .row

{

	background-color: #505962;

	padding: 1rem 2rem 3rem;

	color: #57C4DF;

}



.footer h3

{

	height: 2rem;

	margin: 1.5rem 0;

}



.sm

{

	font-size: 1.5rem;

	margin-top: .5rem;

	padding-left: .5rem;

}



.fa-facebook

{

	color: #2733D9;

}



.fa-linkedin

{

	color: #4875B4;

}



.fa-instagram

{

	color: #4E433C;

}



.fa:hover

{

	text-decoration: none;

}



.skillname

{

	margin-top: 1rem;

	margin-bottom: 0;

}





.skills

{

	width: 100%;

	background-color: #ddd;

	border-radius: 5px;

}







.skill

{

	text-align: right;

	padding: 10px;

	color: white;

	border-radius: 5px

}



@-webkit-keyframes animate-positive{

    0% { width: 0%; }

}

@keyframes animate-positive{

    0% { width: 0%; }

}



.html {width: 90%; background-color: #4CAF50;}

.css {width: 70%; background-color: #2196F3;}

.js {width: 80%; background-color: #B8860B;}

.symf {width: 65%; background-color: #32CD32;}

.php {width: 70%; background-color: #808080;}

.java {width: 40%; background-color: #FFA500;}



.landing

{

	position: relative;

	width: 100%;

	height: 100vh;

	display: table;

	background: #E9ECEF;

	z-index: -1;

}



.home-wrap

{

	clip: rect(0, auto, auto, 0);

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	margin: 0;

	padding: 0;

}



.home-inner

{

	position: fixed;

	display: table;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-size: cover;

	background-position: center center;

	-webkit-transform: translateZ(0);

			transform: translateZ(0);

	will-change: transform;

}

<!DOCTYPE html>

<html>

	<head>

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title> Dustin Timmermans </title>

		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

		<link href="https://fonts.googleapis.com/css?family=Lobster|Nunito+Sans|Pacifico|Righteous|Play" rel="stylesheet">

		<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

		<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

		<link rel="stylesheet" href="css/style.css">

	</head>

	<body data-target="#menu">

		<div id="home">

			<nav class="navbar navbar-dark bg-dark navbar-expand-md fixed-top">

				<div class="container-fluid">

					<a href="#" class="navbar-brand">Dustin Timmermans</a>

					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">

						<span class="navbar-toggler-icon"></span>

					</button>

					<div class="collapse navbar-collapse" id="menu">

						<ul class="navbar-nav ml-auto">

							<li class="nav-item">

								<a class="nav-link" href="#home">Home</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#about">About</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#hobbies">Hobbies</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#contact">Contact</a>

							</li>

						</ul>

					</div>

				</div>

			</nav>



			<div class="landing">

				<div class="home-wrap">

					<div class="home-inner">

					</div>

				</div>

			</div>



			<div class="caption center-block text-center">

				<h3 style="font-family: Pacifico;">Dustin Timmermans</h3>

				<h4 style="font-family: Righteous;">Portfolio</h4>

			</div>



			<div id="about">

				<div class="jumbotron">

					<h3 class="heading">About</h3>

					<div class="row">

						<div class="col-md-4 text-center">

							<h4>Who am I</h4>

							<p>My name is Dustin. Born in 1999 and living in the Hague. Currently I am a student Application and Mediadeveloper at <a href="https://www.rocmondriaan.nl/locatie-tinwerf-16">ROC Mondriaan</a>. I fluently speak and write English and Dutch. Also I am able

								to conversate in German.

							</p>

						</div>

						<div class="col-md-4 text-center">

							<h4>Skills</h4>

							<p class="progress">

								<p class="skillname">HTML5.0/TWIG</p>

								<div class="skills">

									<div class="skill html">90%</div>

								</div>

								<p class="skillname">CSS3.0</p>

								<div class="skills">

									<div class="skill css">70%</div>

								</div>

								<p class="skillname">JavaScript</p>

								<div class="skills">

									<div class="skill js">80%</div>

								</div>

								<p class="skillname">Symfony 3.4</p>

								<div class="skills">

									<div class="skill symf">65%</div>

								</div>

								<p class="skillname">PHP 7</p>

								<div class="skills">

									<div class="skill php">70%</div>

								</div>

								<p class="skillname">Java</p>

								<div class="skills">

									<div class="skill java">40%</div>

								</div>

							</p>

						</div>

						<div class="col-md-4 text-center">

							<h4>Why me</h4>

							<p>The reason why you should pick me as your next intern is, because when I learned to program, a whole new world opened up for me. I kept learning how to program and now I am able to make a fully animated, responsive and functional website.</p>

						</div>

					</div>

				</div>

			</div>



			<div id="hobbies">

				<h3 class="heading">Hobbies</h3>

				<div class="row padding">

					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/motor.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Motorcycle racing</h4>

								<p><i class="fa fa-quote-left"></i> I started racing on a motorcycle when I was 14 years old. I kept practicing and eventually I won the belgian championship. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>



					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/me.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Piano</h4>

								<p><i class="fa fa-quote-left"></i> I practice about 2 to 3 hours a day for almost 3 years now. When I am playing the piano it releases the tension. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>



					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/karten.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Karting</h4>

								<p><i class="fa fa-quote-left"></i> I started racing in a go-kart when I was 9 years old. I've competed in many championship and I've won several grand prix. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>

				</div>

			</div>



			<div id="contact">

				<div class="container-fluid footer">

					<div class="row">

						<div class="col-md-3"></div>

						<div class="col-md-6 text-center">

							<h3>Dustin Timmermans</h3>

							<p>If you would like to check me out on social, <a href="mailto:dustin993246@gmail.com" class="fa fa-address-card-o" target="_top"></a>.</p><br>

							<strong>Social Media</strong><br>

							<a href="https://www.facebook.com/dustin.timmermans.9" class="fa fa-facebook sm" target="_blank"></a>

							<a href="https://www.linkedin.com/in/dustin-timmermans-9a9421148/" class="fa fa-linkedin sm" target="_blank"></a>

							<a href="https://www.instagram.com/dustin_jt32/?hl=nl" class="fa fa-instagram sm" target="_blank"></a>

							<br><br>

							<p>© Copyright <a href="#" style="text-decoration: none;">Dustin Timmermans</a> 2018</p>

						</div>

					</div>

				</div>

			</div>



		</div>

	</body>

</html>





I tried multiple things, but I don't know how to solve the problem. I've never had such a problem and I can't find any similar problems or questions. There are no further problems with the code, this is the only problem I have






html5 css3 bootstrap-4







share|improve this question























  • Did you use element inspector to see if an element overlapses?

    – Midorikawa
    Jan 2 at 21:46











  • yes i did but nothing overlapsed

    – NLDCarbonFiber
    Jan 2 at 21:49














2












2








2








I've made the website responsive, but when I'm on a mobile device or on a small screen a strange line appears on the rightimage of the screen






*

{

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}



html

{

	scroll-behavior: smooth;

}



body

{

	overflow-x: hidden;

	color: #505962;

    margin-top: 25px;

    font-size: 21px;

    text-align: center;



    -webkit-animation: fadein 2s;

       -moz-animation: fadein 2s;

        -ms-animation: fadein 2s;

         -o-animation: fadein 2s;

            animation: fadein 2s;

}



@keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Firefox < 16 */

@-moz-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Internet Explorer */

@-ms-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Opera < 12.1 */

@-o-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



.navbar

{

	text-transform: uppercase;

}



.navbar-brand

{

	height: 2.4rem;

}



.home-inner

{

	background-image: url('../img/imac-on-white-table.jpg');

	opacity: 0.3;

}



.caption

{

	width: 100%;

	position: absolute;

	top: 40%;

	z-index: 1;

}



.caption h3

{

	color: white;

	font-size: 2.4rem;

	padding-bottom: 2rem;

}



h3.heading

{

	text-align: center;

	font-size: 1.9rem;

	text-transform: uppercase;

	margin-bottom: 1.9rem;

}



.card

{

	margin: 2rem;

}



.card-img-top

{

	-webkit-filter: grayscale(90%);

	filter: grayscale(90%);

}



.footer .row

{

	background-color: #505962;

	padding: 1rem 2rem 3rem;

	color: #57C4DF;

}



.footer h3

{

	height: 2rem;

	margin: 1.5rem 0;

}



.sm

{

	font-size: 1.5rem;

	margin-top: .5rem;

	padding-left: .5rem;

}



.fa-facebook

{

	color: #2733D9;

}



.fa-linkedin

{

	color: #4875B4;

}



.fa-instagram

{

	color: #4E433C;

}



.fa:hover

{

	text-decoration: none;

}



.skillname

{

	margin-top: 1rem;

	margin-bottom: 0;

}





.skills

{

	width: 100%;

	background-color: #ddd;

	border-radius: 5px;

}







.skill

{

	text-align: right;

	padding: 10px;

	color: white;

	border-radius: 5px

}



@-webkit-keyframes animate-positive{

    0% { width: 0%; }

}

@keyframes animate-positive{

    0% { width: 0%; }

}



.html {width: 90%; background-color: #4CAF50;}

.css {width: 70%; background-color: #2196F3;}

.js {width: 80%; background-color: #B8860B;}

.symf {width: 65%; background-color: #32CD32;}

.php {width: 70%; background-color: #808080;}

.java {width: 40%; background-color: #FFA500;}



.landing

{

	position: relative;

	width: 100%;

	height: 100vh;

	display: table;

	background: #E9ECEF;

	z-index: -1;

}



.home-wrap

{

	clip: rect(0, auto, auto, 0);

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	margin: 0;

	padding: 0;

}



.home-inner

{

	position: fixed;

	display: table;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-size: cover;

	background-position: center center;

	-webkit-transform: translateZ(0);

			transform: translateZ(0);

	will-change: transform;

}

<!DOCTYPE html>

<html>

	<head>

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title> Dustin Timmermans </title>

		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

		<link href="https://fonts.googleapis.com/css?family=Lobster|Nunito+Sans|Pacifico|Righteous|Play" rel="stylesheet">

		<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

		<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

		<link rel="stylesheet" href="css/style.css">

	</head>

	<body data-target="#menu">

		<div id="home">

			<nav class="navbar navbar-dark bg-dark navbar-expand-md fixed-top">

				<div class="container-fluid">

					<a href="#" class="navbar-brand">Dustin Timmermans</a>

					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">

						<span class="navbar-toggler-icon"></span>

					</button>

					<div class="collapse navbar-collapse" id="menu">

						<ul class="navbar-nav ml-auto">

							<li class="nav-item">

								<a class="nav-link" href="#home">Home</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#about">About</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#hobbies">Hobbies</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#contact">Contact</a>

							</li>

						</ul>

					</div>

				</div>

			</nav>



			<div class="landing">

				<div class="home-wrap">

					<div class="home-inner">

					</div>

				</div>

			</div>



			<div class="caption center-block text-center">

				<h3 style="font-family: Pacifico;">Dustin Timmermans</h3>

				<h4 style="font-family: Righteous;">Portfolio</h4>

			</div>



			<div id="about">

				<div class="jumbotron">

					<h3 class="heading">About</h3>

					<div class="row">

						<div class="col-md-4 text-center">

							<h4>Who am I</h4>

							<p>My name is Dustin. Born in 1999 and living in the Hague. Currently I am a student Application and Mediadeveloper at <a href="https://www.rocmondriaan.nl/locatie-tinwerf-16">ROC Mondriaan</a>. I fluently speak and write English and Dutch. Also I am able

								to conversate in German.

							</p>

						</div>

						<div class="col-md-4 text-center">

							<h4>Skills</h4>

							<p class="progress">

								<p class="skillname">HTML5.0/TWIG</p>

								<div class="skills">

									<div class="skill html">90%</div>

								</div>

								<p class="skillname">CSS3.0</p>

								<div class="skills">

									<div class="skill css">70%</div>

								</div>

								<p class="skillname">JavaScript</p>

								<div class="skills">

									<div class="skill js">80%</div>

								</div>

								<p class="skillname">Symfony 3.4</p>

								<div class="skills">

									<div class="skill symf">65%</div>

								</div>

								<p class="skillname">PHP 7</p>

								<div class="skills">

									<div class="skill php">70%</div>

								</div>

								<p class="skillname">Java</p>

								<div class="skills">

									<div class="skill java">40%</div>

								</div>

							</p>

						</div>

						<div class="col-md-4 text-center">

							<h4>Why me</h4>

							<p>The reason why you should pick me as your next intern is, because when I learned to program, a whole new world opened up for me. I kept learning how to program and now I am able to make a fully animated, responsive and functional website.</p>

						</div>

					</div>

				</div>

			</div>



			<div id="hobbies">

				<h3 class="heading">Hobbies</h3>

				<div class="row padding">

					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/motor.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Motorcycle racing</h4>

								<p><i class="fa fa-quote-left"></i> I started racing on a motorcycle when I was 14 years old. I kept practicing and eventually I won the belgian championship. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>



					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/me.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Piano</h4>

								<p><i class="fa fa-quote-left"></i> I practice about 2 to 3 hours a day for almost 3 years now. When I am playing the piano it releases the tension. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>



					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/karten.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Karting</h4>

								<p><i class="fa fa-quote-left"></i> I started racing in a go-kart when I was 9 years old. I've competed in many championship and I've won several grand prix. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>

				</div>

			</div>



			<div id="contact">

				<div class="container-fluid footer">

					<div class="row">

						<div class="col-md-3"></div>

						<div class="col-md-6 text-center">

							<h3>Dustin Timmermans</h3>

							<p>If you would like to check me out on social, <a href="mailto:dustin993246@gmail.com" class="fa fa-address-card-o" target="_top"></a>.</p><br>

							<strong>Social Media</strong><br>

							<a href="https://www.facebook.com/dustin.timmermans.9" class="fa fa-facebook sm" target="_blank"></a>

							<a href="https://www.linkedin.com/in/dustin-timmermans-9a9421148/" class="fa fa-linkedin sm" target="_blank"></a>

							<a href="https://www.instagram.com/dustin_jt32/?hl=nl" class="fa fa-instagram sm" target="_blank"></a>

							<br><br>

							<p>© Copyright <a href="#" style="text-decoration: none;">Dustin Timmermans</a> 2018</p>

						</div>

					</div>

				</div>

			</div>



		</div>

	</body>

</html>





I tried multiple things, but I don't know how to solve the problem. I've never had such a problem and I can't find any similar problems or questions. There are no further problems with the code, this is the only problem I have






html5 css3 bootstrap-4







share|improve this question














I've made the website responsive, but when I'm on a mobile device or on a small screen a strange line appears on the rightimage of the screen






*

{

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}



html

{

	scroll-behavior: smooth;

}



body

{

	overflow-x: hidden;

	color: #505962;

    margin-top: 25px;

    font-size: 21px;

    text-align: center;



    -webkit-animation: fadein 2s;

       -moz-animation: fadein 2s;

        -ms-animation: fadein 2s;

         -o-animation: fadein 2s;

            animation: fadein 2s;

}



@keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Firefox < 16 */

@-moz-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Internet Explorer */

@-ms-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Opera < 12.1 */

@-o-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



.navbar

{

	text-transform: uppercase;

}



.navbar-brand

{

	height: 2.4rem;

}



.home-inner

{

	background-image: url('../img/imac-on-white-table.jpg');

	opacity: 0.3;

}



.caption

{

	width: 100%;

	position: absolute;

	top: 40%;

	z-index: 1;

}



.caption h3

{

	color: white;

	font-size: 2.4rem;

	padding-bottom: 2rem;

}



h3.heading

{

	text-align: center;

	font-size: 1.9rem;

	text-transform: uppercase;

	margin-bottom: 1.9rem;

}



.card

{

	margin: 2rem;

}



.card-img-top

{

	-webkit-filter: grayscale(90%);

	filter: grayscale(90%);

}



.footer .row

{

	background-color: #505962;

	padding: 1rem 2rem 3rem;

	color: #57C4DF;

}



.footer h3

{

	height: 2rem;

	margin: 1.5rem 0;

}



.sm

{

	font-size: 1.5rem;

	margin-top: .5rem;

	padding-left: .5rem;

}



.fa-facebook

{

	color: #2733D9;

}



.fa-linkedin

{

	color: #4875B4;

}



.fa-instagram

{

	color: #4E433C;

}



.fa:hover

{

	text-decoration: none;

}



.skillname

{

	margin-top: 1rem;

	margin-bottom: 0;

}





.skills

{

	width: 100%;

	background-color: #ddd;

	border-radius: 5px;

}







.skill

{

	text-align: right;

	padding: 10px;

	color: white;

	border-radius: 5px

}



@-webkit-keyframes animate-positive{

    0% { width: 0%; }

}

@keyframes animate-positive{

    0% { width: 0%; }

}



.html {width: 90%; background-color: #4CAF50;}

.css {width: 70%; background-color: #2196F3;}

.js {width: 80%; background-color: #B8860B;}

.symf {width: 65%; background-color: #32CD32;}

.php {width: 70%; background-color: #808080;}

.java {width: 40%; background-color: #FFA500;}



.landing

{

	position: relative;

	width: 100%;

	height: 100vh;

	display: table;

	background: #E9ECEF;

	z-index: -1;

}



.home-wrap

{

	clip: rect(0, auto, auto, 0);

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	margin: 0;

	padding: 0;

}



.home-inner

{

	position: fixed;

	display: table;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-size: cover;

	background-position: center center;

	-webkit-transform: translateZ(0);

			transform: translateZ(0);

	will-change: transform;

}

<!DOCTYPE html>

<html>

	<head>

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title> Dustin Timmermans </title>

		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

		<link href="https://fonts.googleapis.com/css?family=Lobster|Nunito+Sans|Pacifico|Righteous|Play" rel="stylesheet">

		<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

		<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

		<link rel="stylesheet" href="css/style.css">

	</head>

	<body data-target="#menu">

		<div id="home">

			<nav class="navbar navbar-dark bg-dark navbar-expand-md fixed-top">

				<div class="container-fluid">

					<a href="#" class="navbar-brand">Dustin Timmermans</a>

					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">

						<span class="navbar-toggler-icon"></span>

					</button>

					<div class="collapse navbar-collapse" id="menu">

						<ul class="navbar-nav ml-auto">

							<li class="nav-item">

								<a class="nav-link" href="#home">Home</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#about">About</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#hobbies">Hobbies</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#contact">Contact</a>

							</li>

						</ul>

					</div>

				</div>

			</nav>



			<div class="landing">

				<div class="home-wrap">

					<div class="home-inner">

					</div>

				</div>

			</div>



			<div class="caption center-block text-center">

				<h3 style="font-family: Pacifico;">Dustin Timmermans</h3>

				<h4 style="font-family: Righteous;">Portfolio</h4>

			</div>



			<div id="about">

				<div class="jumbotron">

					<h3 class="heading">About</h3>

					<div class="row">

						<div class="col-md-4 text-center">

							<h4>Who am I</h4>

							<p>My name is Dustin. Born in 1999 and living in the Hague. Currently I am a student Application and Mediadeveloper at <a href="https://www.rocmondriaan.nl/locatie-tinwerf-16">ROC Mondriaan</a>. I fluently speak and write English and Dutch. Also I am able

								to conversate in German.

							</p>

						</div>

						<div class="col-md-4 text-center">

							<h4>Skills</h4>

							<p class="progress">

								<p class="skillname">HTML5.0/TWIG</p>

								<div class="skills">

									<div class="skill html">90%</div>

								</div>

								<p class="skillname">CSS3.0</p>

								<div class="skills">

									<div class="skill css">70%</div>

								</div>

								<p class="skillname">JavaScript</p>

								<div class="skills">

									<div class="skill js">80%</div>

								</div>

								<p class="skillname">Symfony 3.4</p>

								<div class="skills">

									<div class="skill symf">65%</div>

								</div>

								<p class="skillname">PHP 7</p>

								<div class="skills">

									<div class="skill php">70%</div>

								</div>

								<p class="skillname">Java</p>

								<div class="skills">

									<div class="skill java">40%</div>

								</div>

							</p>

						</div>

						<div class="col-md-4 text-center">

							<h4>Why me</h4>

							<p>The reason why you should pick me as your next intern is, because when I learned to program, a whole new world opened up for me. I kept learning how to program and now I am able to make a fully animated, responsive and functional website.</p>

						</div>

					</div>

				</div>

			</div>



			<div id="hobbies">

				<h3 class="heading">Hobbies</h3>

				<div class="row padding">

					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/motor.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Motorcycle racing</h4>

								<p><i class="fa fa-quote-left"></i> I started racing on a motorcycle when I was 14 years old. I kept practicing and eventually I won the belgian championship. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>



					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/me.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Piano</h4>

								<p><i class="fa fa-quote-left"></i> I practice about 2 to 3 hours a day for almost 3 years now. When I am playing the piano it releases the tension. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>



					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/karten.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Karting</h4>

								<p><i class="fa fa-quote-left"></i> I started racing in a go-kart when I was 9 years old. I've competed in many championship and I've won several grand prix. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>

				</div>

			</div>



			<div id="contact">

				<div class="container-fluid footer">

					<div class="row">

						<div class="col-md-3"></div>

						<div class="col-md-6 text-center">

							<h3>Dustin Timmermans</h3>

							<p>If you would like to check me out on social, <a href="mailto:dustin993246@gmail.com" class="fa fa-address-card-o" target="_top"></a>.</p><br>

							<strong>Social Media</strong><br>

							<a href="https://www.facebook.com/dustin.timmermans.9" class="fa fa-facebook sm" target="_blank"></a>

							<a href="https://www.linkedin.com/in/dustin-timmermans-9a9421148/" class="fa fa-linkedin sm" target="_blank"></a>

							<a href="https://www.instagram.com/dustin_jt32/?hl=nl" class="fa fa-instagram sm" target="_blank"></a>

							<br><br>

							<p>© Copyright <a href="#" style="text-decoration: none;">Dustin Timmermans</a> 2018</p>

						</div>

					</div>

				</div>

			</div>



		</div>

	</body>

</html>





I tried multiple things, but I don't know how to solve the problem. I've never had such a problem and I can't find any similar problems or questions. There are no further problems with the code, this is the only problem I have






*

{

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}



html

{

	scroll-behavior: smooth;

}



body

{

	overflow-x: hidden;

	color: #505962;

    margin-top: 25px;

    font-size: 21px;

    text-align: center;



    -webkit-animation: fadein 2s;

       -moz-animation: fadein 2s;

        -ms-animation: fadein 2s;

         -o-animation: fadein 2s;

            animation: fadein 2s;

}



@keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Firefox < 16 */

@-moz-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Internet Explorer */

@-ms-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Opera < 12.1 */

@-o-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



.navbar

{

	text-transform: uppercase;

}



.navbar-brand

{

	height: 2.4rem;

}



.home-inner

{

	background-image: url('../img/imac-on-white-table.jpg');

	opacity: 0.3;

}



.caption

{

	width: 100%;

	position: absolute;

	top: 40%;

	z-index: 1;

}



.caption h3

{

	color: white;

	font-size: 2.4rem;

	padding-bottom: 2rem;

}



h3.heading

{

	text-align: center;

	font-size: 1.9rem;

	text-transform: uppercase;

	margin-bottom: 1.9rem;

}



.card

{

	margin: 2rem;

}



.card-img-top

{

	-webkit-filter: grayscale(90%);

	filter: grayscale(90%);

}



.footer .row

{

	background-color: #505962;

	padding: 1rem 2rem 3rem;

	color: #57C4DF;

}



.footer h3

{

	height: 2rem;

	margin: 1.5rem 0;

}



.sm

{

	font-size: 1.5rem;

	margin-top: .5rem;

	padding-left: .5rem;

}



.fa-facebook

{

	color: #2733D9;

}



.fa-linkedin

{

	color: #4875B4;

}



.fa-instagram

{

	color: #4E433C;

}



.fa:hover

{

	text-decoration: none;

}



.skillname

{

	margin-top: 1rem;

	margin-bottom: 0;

}





.skills

{

	width: 100%;

	background-color: #ddd;

	border-radius: 5px;

}







.skill

{

	text-align: right;

	padding: 10px;

	color: white;

	border-radius: 5px

}



@-webkit-keyframes animate-positive{

    0% { width: 0%; }

}

@keyframes animate-positive{

    0% { width: 0%; }

}



.html {width: 90%; background-color: #4CAF50;}

.css {width: 70%; background-color: #2196F3;}

.js {width: 80%; background-color: #B8860B;}

.symf {width: 65%; background-color: #32CD32;}

.php {width: 70%; background-color: #808080;}

.java {width: 40%; background-color: #FFA500;}



.landing

{

	position: relative;

	width: 100%;

	height: 100vh;

	display: table;

	background: #E9ECEF;

	z-index: -1;

}



.home-wrap

{

	clip: rect(0, auto, auto, 0);

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	margin: 0;

	padding: 0;

}



.home-inner

{

	position: fixed;

	display: table;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-size: cover;

	background-position: center center;

	-webkit-transform: translateZ(0);

			transform: translateZ(0);

	will-change: transform;

}

<!DOCTYPE html>

<html>

	<head>

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title> Dustin Timmermans </title>

		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

		<link href="https://fonts.googleapis.com/css?family=Lobster|Nunito+Sans|Pacifico|Righteous|Play" rel="stylesheet">

		<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

		<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

		<link rel="stylesheet" href="css/style.css">

	</head>

	<body data-target="#menu">

		<div id="home">

			<nav class="navbar navbar-dark bg-dark navbar-expand-md fixed-top">

				<div class="container-fluid">

					<a href="#" class="navbar-brand">Dustin Timmermans</a>

					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">

						<span class="navbar-toggler-icon"></span>

					</button>

					<div class="collapse navbar-collapse" id="menu">

						<ul class="navbar-nav ml-auto">

							<li class="nav-item">

								<a class="nav-link" href="#home">Home</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#about">About</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#hobbies">Hobbies</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#contact">Contact</a>

							</li>

						</ul>

					</div>

				</div>

			</nav>



			<div class="landing">

				<div class="home-wrap">

					<div class="home-inner">

					</div>

				</div>

			</div>



			<div class="caption center-block text-center">

				<h3 style="font-family: Pacifico;">Dustin Timmermans</h3>

				<h4 style="font-family: Righteous;">Portfolio</h4>

			</div>



			<div id="about">

				<div class="jumbotron">

					<h3 class="heading">About</h3>

					<div class="row">

						<div class="col-md-4 text-center">

							<h4>Who am I</h4>

							<p>My name is Dustin. Born in 1999 and living in the Hague. Currently I am a student Application and Mediadeveloper at <a href="https://www.rocmondriaan.nl/locatie-tinwerf-16">ROC Mondriaan</a>. I fluently speak and write English and Dutch. Also I am able

								to conversate in German.

							</p>

						</div>

						<div class="col-md-4 text-center">

							<h4>Skills</h4>

							<p class="progress">

								<p class="skillname">HTML5.0/TWIG</p>

								<div class="skills">

									<div class="skill html">90%</div>

								</div>

								<p class="skillname">CSS3.0</p>

								<div class="skills">

									<div class="skill css">70%</div>

								</div>

								<p class="skillname">JavaScript</p>

								<div class="skills">

									<div class="skill js">80%</div>

								</div>

								<p class="skillname">Symfony 3.4</p>

								<div class="skills">

									<div class="skill symf">65%</div>

								</div>

								<p class="skillname">PHP 7</p>

								<div class="skills">

									<div class="skill php">70%</div>

								</div>

								<p class="skillname">Java</p>

								<div class="skills">

									<div class="skill java">40%</div>

								</div>

							</p>

						</div>

						<div class="col-md-4 text-center">

							<h4>Why me</h4>

							<p>The reason why you should pick me as your next intern is, because when I learned to program, a whole new world opened up for me. I kept learning how to program and now I am able to make a fully animated, responsive and functional website.</p>

						</div>

					</div>

				</div>

			</div>



			<div id="hobbies">

				<h3 class="heading">Hobbies</h3>

				<div class="row padding">

					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/motor.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Motorcycle racing</h4>

								<p><i class="fa fa-quote-left"></i> I started racing on a motorcycle when I was 14 years old. I kept practicing and eventually I won the belgian championship. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>



					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/me.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Piano</h4>

								<p><i class="fa fa-quote-left"></i> I practice about 2 to 3 hours a day for almost 3 years now. When I am playing the piano it releases the tension. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>



					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/karten.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Karting</h4>

								<p><i class="fa fa-quote-left"></i> I started racing in a go-kart when I was 9 years old. I've competed in many championship and I've won several grand prix. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>

				</div>

			</div>



			<div id="contact">

				<div class="container-fluid footer">

					<div class="row">

						<div class="col-md-3"></div>

						<div class="col-md-6 text-center">

							<h3>Dustin Timmermans</h3>

							<p>If you would like to check me out on social, <a href="mailto:dustin993246@gmail.com" class="fa fa-address-card-o" target="_top"></a>.</p><br>

							<strong>Social Media</strong><br>

							<a href="https://www.facebook.com/dustin.timmermans.9" class="fa fa-facebook sm" target="_blank"></a>

							<a href="https://www.linkedin.com/in/dustin-timmermans-9a9421148/" class="fa fa-linkedin sm" target="_blank"></a>

							<a href="https://www.instagram.com/dustin_jt32/?hl=nl" class="fa fa-instagram sm" target="_blank"></a>

							<br><br>

							<p>© Copyright <a href="#" style="text-decoration: none;">Dustin Timmermans</a> 2018</p>

						</div>

					</div>

				</div>

			</div>



		</div>

	</body>

</html>





*

{

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}



html

{

	scroll-behavior: smooth;

}



body

{

	overflow-x: hidden;

	color: #505962;

    margin-top: 25px;

    font-size: 21px;

    text-align: center;



    -webkit-animation: fadein 2s;

       -moz-animation: fadein 2s;

        -ms-animation: fadein 2s;

         -o-animation: fadein 2s;

            animation: fadein 2s;

}



@keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Firefox < 16 */

@-moz-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Internet Explorer */

@-ms-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



/* Opera < 12.1 */

@-o-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}



.navbar

{

	text-transform: uppercase;

}



.navbar-brand

{

	height: 2.4rem;

}



.home-inner

{

	background-image: url('../img/imac-on-white-table.jpg');

	opacity: 0.3;

}



.caption

{

	width: 100%;

	position: absolute;

	top: 40%;

	z-index: 1;

}



.caption h3

{

	color: white;

	font-size: 2.4rem;

	padding-bottom: 2rem;

}



h3.heading

{

	text-align: center;

	font-size: 1.9rem;

	text-transform: uppercase;

	margin-bottom: 1.9rem;

}



.card

{

	margin: 2rem;

}



.card-img-top

{

	-webkit-filter: grayscale(90%);

	filter: grayscale(90%);

}



.footer .row

{

	background-color: #505962;

	padding: 1rem 2rem 3rem;

	color: #57C4DF;

}



.footer h3

{

	height: 2rem;

	margin: 1.5rem 0;

}



.sm

{

	font-size: 1.5rem;

	margin-top: .5rem;

	padding-left: .5rem;

}



.fa-facebook

{

	color: #2733D9;

}



.fa-linkedin

{

	color: #4875B4;

}



.fa-instagram

{

	color: #4E433C;

}



.fa:hover

{

	text-decoration: none;

}



.skillname

{

	margin-top: 1rem;

	margin-bottom: 0;

}





.skills

{

	width: 100%;

	background-color: #ddd;

	border-radius: 5px;

}







.skill

{

	text-align: right;

	padding: 10px;

	color: white;

	border-radius: 5px

}



@-webkit-keyframes animate-positive{

    0% { width: 0%; }

}

@keyframes animate-positive{

    0% { width: 0%; }

}



.html {width: 90%; background-color: #4CAF50;}

.css {width: 70%; background-color: #2196F3;}

.js {width: 80%; background-color: #B8860B;}

.symf {width: 65%; background-color: #32CD32;}

.php {width: 70%; background-color: #808080;}

.java {width: 40%; background-color: #FFA500;}



.landing

{

	position: relative;

	width: 100%;

	height: 100vh;

	display: table;

	background: #E9ECEF;

	z-index: -1;

}



.home-wrap

{

	clip: rect(0, auto, auto, 0);

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	margin: 0;

	padding: 0;

}



.home-inner

{

	position: fixed;

	display: table;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-size: cover;

	background-position: center center;

	-webkit-transform: translateZ(0);

			transform: translateZ(0);

	will-change: transform;

}

<!DOCTYPE html>

<html>

	<head>

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title> Dustin Timmermans </title>

		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

		<link href="https://fonts.googleapis.com/css?family=Lobster|Nunito+Sans|Pacifico|Righteous|Play" rel="stylesheet">

		<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

		<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

		<link rel="stylesheet" href="css/style.css">

	</head>

	<body data-target="#menu">

		<div id="home">

			<nav class="navbar navbar-dark bg-dark navbar-expand-md fixed-top">

				<div class="container-fluid">

					<a href="#" class="navbar-brand">Dustin Timmermans</a>

					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">

						<span class="navbar-toggler-icon"></span>

					</button>

					<div class="collapse navbar-collapse" id="menu">

						<ul class="navbar-nav ml-auto">

							<li class="nav-item">

								<a class="nav-link" href="#home">Home</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#about">About</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#hobbies">Hobbies</a>

							</li>

							<li class="nav-item">

								<a class="nav-link" href="#contact">Contact</a>

							</li>

						</ul>

					</div>

				</div>

			</nav>



			<div class="landing">

				<div class="home-wrap">

					<div class="home-inner">

					</div>

				</div>

			</div>



			<div class="caption center-block text-center">

				<h3 style="font-family: Pacifico;">Dustin Timmermans</h3>

				<h4 style="font-family: Righteous;">Portfolio</h4>

			</div>



			<div id="about">

				<div class="jumbotron">

					<h3 class="heading">About</h3>

					<div class="row">

						<div class="col-md-4 text-center">

							<h4>Who am I</h4>

							<p>My name is Dustin. Born in 1999 and living in the Hague. Currently I am a student Application and Mediadeveloper at <a href="https://www.rocmondriaan.nl/locatie-tinwerf-16">ROC Mondriaan</a>. I fluently speak and write English and Dutch. Also I am able

								to conversate in German.

							</p>

						</div>

						<div class="col-md-4 text-center">

							<h4>Skills</h4>

							<p class="progress">

								<p class="skillname">HTML5.0/TWIG</p>

								<div class="skills">

									<div class="skill html">90%</div>

								</div>

								<p class="skillname">CSS3.0</p>

								<div class="skills">

									<div class="skill css">70%</div>

								</div>

								<p class="skillname">JavaScript</p>

								<div class="skills">

									<div class="skill js">80%</div>

								</div>

								<p class="skillname">Symfony 3.4</p>

								<div class="skills">

									<div class="skill symf">65%</div>

								</div>

								<p class="skillname">PHP 7</p>

								<div class="skills">

									<div class="skill php">70%</div>

								</div>

								<p class="skillname">Java</p>

								<div class="skills">

									<div class="skill java">40%</div>

								</div>

							</p>

						</div>

						<div class="col-md-4 text-center">

							<h4>Why me</h4>

							<p>The reason why you should pick me as your next intern is, because when I learned to program, a whole new world opened up for me. I kept learning how to program and now I am able to make a fully animated, responsive and functional website.</p>

						</div>

					</div>

				</div>

			</div>



			<div id="hobbies">

				<h3 class="heading">Hobbies</h3>

				<div class="row padding">

					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/motor.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Motorcycle racing</h4>

								<p><i class="fa fa-quote-left"></i> I started racing on a motorcycle when I was 14 years old. I kept practicing and eventually I won the belgian championship. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>



					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/me.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Piano</h4>

								<p><i class="fa fa-quote-left"></i> I practice about 2 to 3 hours a day for almost 3 years now. When I am playing the piano it releases the tension. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>



					<div class="col-md-4">

						<div class="card text-center">

							<img src="img/karten.jpg" class="card-img-top">

							<div class="card-body">

								<h4>Karting</h4>

								<p><i class="fa fa-quote-left"></i> I started racing in a go-kart when I was 9 years old. I've competed in many championship and I've won several grand prix. <i class="fa fa-quote-right"></i></p>

							</div>

						</div>

					</div>

				</div>

			</div>



			<div id="contact">

				<div class="container-fluid footer">

					<div class="row">

						<div class="col-md-3"></div>

						<div class="col-md-6 text-center">

							<h3>Dustin Timmermans</h3>

							<p>If you would like to check me out on social, <a href="mailto:dustin993246@gmail.com" class="fa fa-address-card-o" target="_top"></a>.</p><br>

							<strong>Social Media</strong><br>

							<a href="https://www.facebook.com/dustin.timmermans.9" class="fa fa-facebook sm" target="_blank"></a>

							<a href="https://www.linkedin.com/in/dustin-timmermans-9a9421148/" class="fa fa-linkedin sm" target="_blank"></a>

							<a href="https://www.instagram.com/dustin_jt32/?hl=nl" class="fa fa-instagram sm" target="_blank"></a>

							<br><br>

							<p>© Copyright <a href="#" style="text-decoration: none;">Dustin Timmermans</a> 2018</p>

						</div>

					</div>

				</div>

			</div>



		</div>

	</body>

</html>





html5 css3 bootstrap-4




html5 css3 bootstrap-4






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Jan 2 at 21:43









NLDCarbonFiberNLDCarbonFiber

132




132













  • Did you use element inspector to see if an element overlapses?

    – Midorikawa
    Jan 2 at 21:46











  • yes i did but nothing overlapsed

    – NLDCarbonFiber
    Jan 2 at 21:49



















  • Did you use element inspector to see if an element overlapses?

    – Midorikawa
    Jan 2 at 21:46











  • yes i did but nothing overlapsed

    – NLDCarbonFiber
    Jan 2 at 21:49

















Did you use element inspector to see if an element overlapses?

– Midorikawa
Jan 2 at 21:46





Did you use element inspector to see if an element overlapses?

– Midorikawa
Jan 2 at 21:46













yes i did but nothing overlapsed

– NLDCarbonFiber
Jan 2 at 21:49





yes i did but nothing overlapsed

– NLDCarbonFiber
Jan 2 at 21:49












1 Answer
1






active

oldest

votes


















0














.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {

    padding-right: 0 !important;

}



.row

{

    margin-right: 0 !important;

}


This isn't the right way to fix it but the quick and dirty way






share|improve this answer
























  • Midorikawa, care to explain why this helps? :) I mean, why is the browser (Chrome in this case, probably other WebKit browsers as well) applying this padding & margin even though it's not specified in the CSS? In Firefox, it renders properly even without this quirk so it seems very WebKit specific.

    – Per Lundberg
    Jan 2 at 22:10












Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54013541%2fwhen-viewing-on-mobile-strange-line-appears-on-the-right-side%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {

    padding-right: 0 !important;

}



.row

{

    margin-right: 0 !important;

}


This isn't the right way to fix it but the quick and dirty way






share|improve this answer
























  • Midorikawa, care to explain why this helps? :) I mean, why is the browser (Chrome in this case, probably other WebKit browsers as well) applying this padding & margin even though it's not specified in the CSS? In Firefox, it renders properly even without this quirk so it seems very WebKit specific.

    – Per Lundberg
    Jan 2 at 22:10
















0














.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {

    padding-right: 0 !important;

}



.row

{

    margin-right: 0 !important;

}


This isn't the right way to fix it but the quick and dirty way






share|improve this answer
























  • Midorikawa, care to explain why this helps? :) I mean, why is the browser (Chrome in this case, probably other WebKit browsers as well) applying this padding & margin even though it's not specified in the CSS? In Firefox, it renders properly even without this quirk so it seems very WebKit specific.

    – Per Lundberg
    Jan 2 at 22:10














0












0








0







.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {

    padding-right: 0 !important;

}



.row

{

    margin-right: 0 !important;

}


This isn't the right way to fix it but the quick and dirty way






share|improve this answer













.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {

    padding-right: 0 !important;

}



.row

{

    margin-right: 0 !important;

}


This isn't the right way to fix it but the quick and dirty way







share|improve this answer












share|improve this answer



share|improve this answer










answered Jan 2 at 22:02









MidorikawaMidorikawa

166




166













  • Midorikawa, care to explain why this helps? :) I mean, why is the browser (Chrome in this case, probably other WebKit browsers as well) applying this padding & margin even though it's not specified in the CSS? In Firefox, it renders properly even without this quirk so it seems very WebKit specific.

    – Per Lundberg
    Jan 2 at 22:10



















  • Midorikawa, care to explain why this helps? :) I mean, why is the browser (Chrome in this case, probably other WebKit browsers as well) applying this padding & margin even though it's not specified in the CSS? In Firefox, it renders properly even without this quirk so it seems very WebKit specific.

    – Per Lundberg
    Jan 2 at 22:10

















Midorikawa, care to explain why this helps? :) I mean, why is the browser (Chrome in this case, probably other WebKit browsers as well) applying this padding & margin even though it's not specified in the CSS? In Firefox, it renders properly even without this quirk so it seems very WebKit specific.

– Per Lundberg
Jan 2 at 22:10





Midorikawa, care to explain why this helps? :) I mean, why is the browser (Chrome in this case, probably other WebKit browsers as well) applying this padding & margin even though it's not specified in the CSS? In Firefox, it renders properly even without this quirk so it seems very WebKit specific.

– Per Lundberg
Jan 2 at 22:10




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54013541%2fwhen-viewing-on-mobile-strange-line-appears-on-the-right-side%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

MongoDB - Not Authorized To Execute Command

Image
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 0 I have successfully enabled authorization on MongoDB and I have created an account on the admin database and then I created an account for my database called test. The following connection string to connect to my test database works successfully: mongo --host 192.168.17.52 --port 27017 -u user1 -p password --authenticationDatabase test Only problem I have now is, I cannot execute commands such as: show dbs. I get the following error when I try to do so: "errmsg" : "not authorized on admin to execute command { listDatabases: 1.0, lsid: { id: UUID("a1d5bc0d-bc58-485e-b232-270758a89455") }, $db: "admin...
Read more

in spring boot 2.1 many test slices are not allowed anymore due to multiple @BootstrapWith

Image
1 I tried to upgrade a yummy sandwich made of two test slices (@JsonTest and @JdbcTest in my case, crunchy test code in between) adding spring boot 2.1 flavour to it. But it seems it was not much of a success. I cannot annotate my tests with many @...Test since they are now each bringing their own XxxTestContextBootstrapper. It used to work when they all used same SpringBootTestContextBootstrapper. @RunWith(SpringRunner.class) @JdbcTest @JsonTest public class Test { @Test public void test() { System.out.printn("Hello, World !"); } } The error I get from BootstrapUtils is illegalStateException : Configuration error: found multiple declarations of @BootstrapWith for test class I understand I might be doing something wrong here but is there an easy way I could load both Json and Jdbc contex...
Read more

Npm cannot find a required file even through it is in the searched directory

Image
up vote 0 down vote favorite I got that error: users-Air:pdfuploader user$ npm run start client@0.1.0 start /Users/user/Documents/pdfuploader react-scripts start Could not find a required file. Name: index.html Searched in: /Users/user/Documents/pdfuploader/public npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! client@0.1.0 start: `react-scripts start` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the client@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/user/.npm/_logs/2018-11-19T10_19_14_555Z-debug.log users-Air:pdfuploader user$ And the file is in /Users/user/Documents/pdfuploader/public as you can see in my github repository: https://github.c...
Read more