У меня странные пробелы в мобильной версии, вот несколько изображений:
Вот как это выглядит на рабочем столе:
Рабочий стол # 01
Рабочий стол № 02
И мобильный:
Мобильный № 01 - с правым пробелом
Мобильный # 02 - с "h3 class =" display-4 ", возможно, вызывает этот интервал?
HTML:
<!-- The beginning of html -->
<!DOCTYPE HTML>
<html lang="PL-pl">
<head>
<title>The page is being rebuilt...</title>
<meta charset="utf-8">
<!-- versioning can often help (href="css/style.css?ver=2.0") -->
<!-- BOOTSTRAP 4 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://reportsquestionsznaczki65.000webhostapp.com/css/restyled.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
<main>
<div class="jumbotron jumbotron-fluid text-white text-center bg-info nomarginbottom">
<div class="container">
<h3 class="display-2">This site is being finally rebuilt!</h3>
<p class="lead">Hence it will have more features soon.</p>
</div>
</div>
<div class="container-fluid">
<div class="row mt-3 text-center">
<div class="col-12">
<h3 class="display-4">Sites done:</h3>
</div>
</div>
<div class="row justify-content-center mt-2 text-white text-center mb-4">
<div class="col-12 col-lg-4">
<a class="websitelink" href="https://reportsquestionsznaczki65.000webhostapp.com/wszyscy.html">
<div class="box lead p-4">Go to: "WSZYSCY"</div>
</a>
</div>
</div>
<div class="row text-center">
<div class="col-12 change"><h4 class="display-4">What will be changed?</h4></div>
</div>
<div class="text-center">
<div class="row change2">
<p class="col-sm-6 col-lg-3 feature lead">The structure of the page.</p> <!-- class feature not used -->
<p class="col-sm-6 col-lg-3 feature lead">The site will be now responsive.</p>
<p class="col-sm-6 col-lg-3 feature lead">Lessons will be adding automatically via JS.</p>
<p class="col-sm-6 col-lg-3 feature lead">More code, more readable..</p>
</div>
<div class="row change2">
<div class="col-sm-6 col-lg-3 feature lead"><p>Sleek look.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>Fast and comprehensive.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>Inspiring quotes.</p></div>
<div class="col-sm-6 col-lg-3 feature lead"><p>And much more...</p></div>
</div>
</div>
<div class="row change2">
<div class="col-12">
<h5 class="text-center border border-3 border-dashed border-info change3 nomarginbottom">
<q>You can do everything, unless your imagination has stopped you.</q>
</h5>
</div>
</div>
<div class="row change2">
<div class="col-12">
<h3 class="display-4 text-center nomarginbottom">Current status: Learning Bootstrap 4.2 (80%) + Added "wszyscy.html".</h3>
<p class="lead text-center nomarginbottom">Overall status: 5% done on the page.</p>
</div>
</div>
<div class="row mb-5">
<div class="col-12">
<h5 class="text-center border border-3 border-dashed border-info change3 nomarginbottom">
<q>Change is best, when it's changing with you, not without.</q>
</h5>
</div>
</div>
</div>
</main>
<noscript>
<meta http-equiv="refresh" content="0; URL=https://reportsquestionsznaczki65.000webhostapp.com/noscript.html"/>
</noscript>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
CSS (restyled.css):
body {
background-color: #eee;
}
/* Rebuilding the page */
.change {
padding: 30px 10px;
background-color: #dedede;
}
.change2 {
padding: 15px 5px;
}
.change3 {
padding: 20px 5px;
}
.nomargin {
margin: 0;
}
.nomarginbottom {
margin-bottom: 0;
}
img[alt="www.000webhost.com"] {
display: none;
}
.border-3 {
border-width: 3px !important;
}
.border-dashed {
border-style: dashed !important;
}
.websitelink, .websitelink:hover {
text-decoration: none;
color: #FFF;
}
.box {
background-color: #343a40;
font-size: 170%;
}
.box:hover {
background-color: darkslategray;
cursor: pointer;
}
Вот сайт:
https://reportsquestionsznaczki65.000webhostapp.com
Благодаря этому онлайн вы можете использовать:
view-source: https://reportsquestionsznaczki65.000webhostapp.com/index.html https://reportsquestionsznaczki65.000webhostapp.com/css/restyled.css
Спасибо за любую помощь.