Home>

I made a site, but I'm in trouble because there is a blank space on the right edge of the page.

I want to erase the margin

Applicable source code
<!doctype html><html><head><!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+jcPk1dcross"
  <link rel="stylesheet" type="text/css" href="style.css"><title>Hello, world!</title><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected];700&display=swap" rel="stylesheet"><link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet"></head><body data-spy="scroll" data-target="#navbarResponsive"><!---- start home ---> <!--- Navigation ---><nav>    <p>Yukawa Design Office</p>    <button type="button" data-toggle="collapse" data-target="#navbarResponsive">        <span></span>    </button>                <ul>            <li>                  Home              </li>            <li>                  About              </li>            <li>                  Works              </li>            <li>                  Profile              </li>            <li>                  Contact              </li>        </ul>        </nav>
   <!---- end home --->

  <!---- start works --->                       Works                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Easy quote now          <!---end row--><!---end jumbotron--><!---- end works --->

  <!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAony" cross</script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anony script></body></html>
body{
    /*---overflow: hidden;---*/
    color: #505962;
    font-family:'Noto Sans JP', sans-serif;
}
.offset:before{
    height: 4.8rem;
    margin-top: -4.8rem;
    content: "";
    display: block;
}
/*--- navbar ---*/
.navbar {
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .1rem;
    background: rgba(0, 0, 0, .6)!important;
    margin: 0 auto;
}
.navbar-brand {
    position: relative;
    top: 15px;
    left: 20px;
    height: 3rem;
}
.navbar-nav li {
    padding-right: .7rem;
}
.navbar-dark .navbar-nav .nav-link {
    color: white;
    padding-top: .8rem;
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #1ebba3;
}
/*---slider---*/
.carousel-item {
    height: 100vh;
    background-size: cover;
}

.carousel-caption h1 {
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: .3rem;
    text-shadow: .1rem .1rem .8rem black;
    padding-bottom: 1rem;
    color: #FFFFFF;
}
.btn-flat-border {
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 25px;
    padding: 0.2em 0.6em;
    text-decoration: none;
    text-shadow: .1rem .1rem .1rem black;
    color: #FFFFFF;
    border: solid 2px #FFFFFF;
    border-radius: 3px;
    transition: .4s;
    margin-top: 50px;
  }
  .btn-flat-border:hover {
    background: #FFFFFF;
    color: black;
    text-shadow: none;
  }
.slider-wrapper{
    z-index: 1;
}
.prevnext-btn{
    z-index: 2;
}
.slider-doc{
    position: relative;
    top: 400px;
    left: -200px;
}
/*---about---*/
.narrow {
    width: 75%;
    margin: 0 auto;
    padding-top: 2rem;
}
.btn-md {
    border-width: medium;
    border-radius: 0;
    padding: .6rem 1.1rem;
    text-transform: uppercase;
    margin: 1rem;
}
.jumbotron {
    border-radius: 0em;
    padding: 3rem 0 2rem;}
h3.heading {
    font-size: 1.9rem;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 1.9rem;
}
.heading-underline {
    width: 3rem;
    height: .2rem;
    background-color: #1ebba3;
    margin: 0 auto 2rem;
}
p.lead {
    line-height: 40px;
    padding-bottom: 40px;
}
div.narrow h1{
    line-height: 90px;
}
div.narrow h2 {
    line-height: 70px;
    font-weight: 900;
}
/*---WORKS---*/
.works img {
    max-width: 100%;
    transition: transform .5s ease;
}
.row.no-padding [class*=col-] {
    padding: 0;
}
.works img:hover {
    transform: scale(1.1);
    cursor: zoom-in;
}
.works {
    overflow: hidden;
}
.card {
    margin: 2rem;
}
.mitumori {
    margin-top: 30px;
}
/*---profile---*/
.card-wrapper {
    margin: 0 auto;
    display:flex;
  }
/*---contact---*/
footer {
    background-color: #40474e;
    color: white;
    padding: 2rem 0 3rem;
    margin-top: 1rem;
}
footer img {
    height: 3rem;
    margin: 1.5rem 0;
}
footer a {
    color: white;
}
footer svg.svg-inline--fa {
    font-size: 1.6rem;
    margin: 1.2rem .5rem 0 0;
}
footer svg.svg-inline--fa:hover {
    color: #1ebba3;
}
hr.socket {
    border-top: .2rem solid #666b71;
    width: 100%;
}
.contact-info{
    text-align: center;
}
hr {
    width: 100%;
}
.contact-name{
    padding-top: 10px;
}
/*---media queries---*/
@media (max-width: 767px) {
    .carousel-caption h1 {
        font-size: 2.3rem;
        letter-spacing: .1rem;
        padding-bottom: .5rem;
    }
    .carousel-caption h3 {
        font-size: 1.2rem;
        padding-bottom: 1.1rem;
    }
    .btn-lg {
        font-size: 1rem;
    }
    .narrow h1 {
        font-size: 1.5rem;
    }
    p.lead {
        font-size: 1rem;
    }
}
What I tried

I reviewed CSS, but did not understand the cause.

  • Answer # 1

    The bootstrap grid system has its own margin and padding between container and row.
    For more information, please read this article because it is easy to understand.
    But set in the questionjumbotronCauses the negative margin of row to be displayed by interfering with this margin and padding. This is the identity of the right margin.

    To solve this, instead of setting jumbotron and container class in the same div element,

    Create container class div element inside jumbotron

    Grid system is put in this container

    It should be

    -
    + 
    + 
            
            Works
            
            
        
    (Omitted below)
    +


    Don't forget the closing tag.