特定的分辨率上出现奇怪的空格

时间：2019-05-24 12:38:12

标签： html css

我正在尝试为一个小型项目构建主题。一切都进行得很好，直到我看到某些内容在左侧并且看不到并且页面的右侧也有白色边缘。

我已经尝试过弄乱引导程序添加的填充和边距。我认为这可能会有所帮助，但没有帮助。

/*reset.css*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*main.css*/
html {
    height: 100%;
}

body {
    height: 100%;
    background-color: #fff;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
}

hr {
    border-bottom: 1px solid #fff;
}

/*header.ejs*/

.btn-home {
    font-weight: bold;
}

.btn-home:hover {
    color: #f18a01;
    background-color: #fff;
}

.tear {
    font-size: 5rem;
}

.face-404 {
    margin-bottom: 0.75rem;
}

.vertical-center {
    margin: 0 !important;
    height:100vh;
    width:100%;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
    background-color: #f18a01;
    color: #fff;
  }
  
.vertical-center:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
  
.container {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
                             /* reset the font property */
    font: 0.5rem/1 "Alegreya Sans";
    font-weight: bold !important;
  }

  .container-404 {
    height: 100%;
    background-image: url("img/404.png");
    background-repeat:no-repeat;
    background-size: 100% 100%;
}

/*home.ejs*/

.shrink {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    margin-left: -1rem;
    border-bottom: 3.5px solid orange !important;
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.border {
    border-bottom: 3.5px solid orange !important;
}

.logo {
    width: 10rem;
}

.bg-orange {
    background-color: #F28A00;
    color: #fff;
}

.ml-1 > span {
    font-size: 0.8rem;
}

.ml-1 > i {
    font-size: 1.1rem;
}

.bara-mica-text {
    font-size: 0.8rem;
    letter-spacing: 0.25px;
}

.margin-top-bot {
    margin: 0.2rem 0;
}

.margin-top-bot > span > a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 0.8rem;
    transition: 0.25s;
}

.margin-top-bot > span > a:hover {
    color: #ADADAD;
}

.nav-item > a {
    transition: 0.4s;
    font-weight: 700;
}

.nav-item > a:hover {
    color: #F28A00 !important;  
}

.logos-top {
    height: 5rem;
}

.home-intro {
    background-image: url("../img/home-div-bg.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.container-home {
    padding: 15rem 0rem 27.5rem 0rem;
}

.slogan-home {
    color: #F28A00;
}

.welcome-home {
    font-size: 4.5rem;
    line-height: 4.5rem;
}

.btn1-home-custom {
    color: #fff;
    background-color: #F28A00;
    outline: none;
    border-color: #F28A00;
    border-radius: 30px;
    height: 3rem;
    width: 12rem;
    text-transform: uppercase;
    font-weight: bold;
}

.btn2-home-custom {
    color: #F28A00;
    background-color: #fff;
    border-color: #fff;
    border-radius: 30px;
    text-transform: uppercase;
    font-weight: bold;
    width: 12rem;
}

.btn1-home-custom:hover,
.btn2-home-custom:hover {
    color: #fff;
    background-color: #212529;
    outline: none;
    border-color: #F28A00;
}

.btn:focus,.btn:active {
    outline: none !important;
    box-shadow: none;
 }

.container-home-butoane-intro {
    margin-top: 2.5rem;
    margin-left: 2rem;
}

.home-intro-2 {
    background-image: url("../img/home2-div-bg.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    color: #fff;
}

.home-intro-2:before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    background: rgba(0,0,0,.75);
 }

 .home-intro-2 > .row {
    padding: 4.5rem 0;
 }

 .home-intro-2 > .row > .col-md-6 > .display-4 {
     text-align: right;
     font-weight: bold;
     padding-right: 0.75rem;
     border-right: 2px solid #fff;
 }

 .home-intro-2 > .row > .col-md-6 > .lead {
    text-align: left;
    width: 75%;
    margin-top: 0.25rem;
}

.home-intro-2 > .row > .col-md-6 > i {
    margin-left: 0.75rem;
}

.home-intro-2 > .row > .col-md-6 > i > a {
    margin-left: 0.5rem;
    text-decoration: none;
    color: #fff;
    font-family: "Roboto";
    font-weight: bold;
}

.home-suntem > .container > .row > .display-4 {
    padding-top: 2rem;
    text-align: center;
    color: #F28A00;
    font-weight: bold;
}

.home-cine-suntem {
    text-align: center;
    padding: 2rem;
}

.home-cine-suntem > a {
    display: inline-block;
    padding-bottom: 1rem;
    text-decoration: none;
    color: orange;
    font-size: 1rem;
    font-family: "Roboto";
    font-weight: bold;
}

.home-sustinem > .container > .row > .display-4 {
    text-align: center;
    font-weight: bold;
    padding-top: 2rem;
}

.home-sustinem > .container {
    background-color: #252525;
    color: #fff;
}

.home-cum-sustinem {
    text-align: center;
    color: #585858;
    padding: 2rem;
}

.home-cum-sustinem > a{
    display: inline-block;
    padding-bottom: 1rem;
    text-decoration: none;
    font-size: 1rem;
    font-family: "Roboto";
    font-weight: bold;
    color: #585858;
}

.home-services > .container > .row > .display-4 {
    padding-top: 2rem;
    text-align: center;
    color: #F28A00;
    font-weight: bold;
}

.home-services > .container > .row > .col-md-3 {
    margin: 1rem 0;
}

.home-services > .container > .row > .col-md-3 > .home-service {
    border: 2px solid #F28A00;
    text-align: center;
}

.home-services > .container > .row > .col-md-3 > .home-service > .lead {
    padding: 0 1rem;
}

.home-services > .container > .row > .col-md-3 > .home-service > h1 {
    padding: 1rem 0;
    font-weight: bold;
}

.home-services > .container > .row > .col-md-3 > .home-service > a {
    display: inline-block;
    padding-bottom: 1rem;
    text-decoration: none;
    color: orange;
    font-size: 1rem;
    font-family: "Roboto";
    font-weight: bold;
}

.home-services > .container {
    margin-bottom: 2rem;
}

.home-echipa > .container {
    background-color: #252525;
    color: #fff;
}

.eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}

.home-echipa > .container > .row > .display-4 {
    text-align: center;
    font-weight: bold;
    padding: 2rem 0 2.5rem 0;
}

.home-echipa > .container > .row > .home-echipa-functie {
    font-size: 1.3rem; 
}

.home-echipa > .container > .row > .home-echipa-nume {
    font-weight: bold;
}

.home-echipa > .container > .row > .home-echipa-poza-persoana {
    width: 150px;
    height: 150px;
    margin-bottom: 2rem;
}

.home-echipa > .container > .row > .col-md-7 > .home-descriere-persoana {
    margin-top: 1rem;
    text-align: center;
    color: #585858;
    margin-bottom: 4rem;
}

.home-proiecte > .container > .row > .display-4 {
    padding-top: 2rem;
    text-align: center;
    color: #F28A00;
    font-weight: bold;
    font-size: 1.5rem;
}

.home-echipa > .container {
    background-color: #252525;
    color: #fff;
}

.proiecte-logos {
    font-size: 1.3rem;
    margin: 4rem 0;
}

.footer-div {
    font-weight: bold;
    text-align: center;
}

.navbar-footer {
    padding: 2rem 0;
}

/*bootstrap navbar activate*/
@media (min-width: 1400px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

/* responsive layout */
@media screen and (max-width: 670px) {
    .logos-top {
        height: 2.5rem;
        display: block !important;
        margin: 0 auto !important;
    }
    .fa-phone {
        margin-left: 0 !important;
    }
    .margin-top-bot .mr-5 {
        margin-right: 2rem !important;
    }
}

@media screen and (max-width: 760px) {
    .logos-top {
        height: 1.25rem;
        display: block !important;
        margin: 0 auto !important;
    }
}

/*efect scroll*/
@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:400,800" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <link rel="stylesheet" href="css/css.css">
    <title>doc</title>
</head>
<body>
    <header>
            <div class="container-fluid border">
                <div class="row bg-orange">
                    <div class="container-fluid">
                            <div class="ml-1 margin-top-bot float-left">
                                <i class="fas fa-phone ml-5"></i>
                                <span class="ml-1 bara-mica-text">074 444 4444</span>
                                <i class="fas fa-envelope ml-5"></i>
                                <span class="ml-1 bara-mica-text">xxx@gmail.com</span>
                            </div>
                            <div class="mr-2 margin-top-bot float-right">
                              <span class="mr-5"><a href="#" class="mr-5">Locatie</a></span>
                              <span class="mr-5"><a href="#" class="mr-5">Despre noi</a></span>
                              <span class="mr-5"><a href="#" class="mr-5">Contact</a></span>
                            </div>
                    </div>
                </div>
                <nav class="navbar navbar-expand-custom navbar-light navbar-custom">     
                        <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">
                          <a class="navbar-brand" href="/"><img src="./img/logo.jpg" class="logo"></a>
                          <ul class="navbar-nav mx-auto">
                            <li class="nav-item mr-2 active">
                              <a class="nav-link buton-top-home" href="/">Acasa <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item mr-2">
                              <a class="nav-link buton-top-home" href="#">Cine suntem?</a>
                            </li>
                            <li class="nav-item mr-2">
                                <a class="nav-link buton-top-home" href="#">Cum te sustinem?</a>
                            </li>
                            <li class="nav-item mr-2">
                              <a class="nav-link buton-top-home" href="#">Proiect 1</a>
                            </li>
                            <li class="nav-item mr-2">
                                <a class="nav-link buton-top-home" href="#">Proiect 2</a>
                              </li>
                              <li class="nav-item mr-2">
                                  <a class="nav-link buton-top-home" href="#">Consultanta</a>
                              </li>
                              <li class="nav-item mr-2">
                                  <a class="nav-link buton-top-home" href="#">FAQ</a>
                                </li>
                              <li class="nav-item mr-2">
                                  <a class="nav-link buton-top-home" href="#">Contact</a>
                              </li>
                          </ul>
                        </div>
                        <div>
                            <img src="./img/logos.png" class="logos-top">
                        </div>
                      </nav> 
                </div>
            </header>
<section class="home-intro">
    <div class="row">
    <div class="container container-home col-xl-9 col-11">
      <h1 class="slogan-home">slogan??</h1>
      <p class="welcome-home">Bine ai venit la <br/>BEST DAVNIC73!</p>
      <div class="container-home-butoane-intro">
      <button type="button" class="btn btn-outline-primary btn-lg btn1-home-custom">Contacteaza-ne!</button>
      <button type="button" class="btn btn-outline-primary btn-lg btn2-home-custom">Afla mai multe</button>
    </div>
  </div>
</div>
</section>
<section class="home-intro-2">
    <div class="row">
        <div class="col-md-6">
              <h1 class="display-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>  
        </div>  
        <div class="col-md-6">
            <h1 class="lead">Donec congue congue ex sit amet suscipit. Duis sit amet ex vel dolor tristique gravida ac ut purus. Mauris mi diam, rhoncus vitae massa non, vestibulum tempor magna. </h1>  
            <i class="fas fa-arrow-right"><a href="#">Mai mult...</a></i>
        </div>  
    </div>
</section>
<section class="home-suntem">
    <div class="container">
        <div class="row justify-content-center">
              <h1 class="col-md-6 display-4">
                Cine suntem?
              </h1>
        </div>
        <div class="row justify-content-center">
            <div class="home-cine-suntem col-md-8">
            <p class="lead home-descriere-persoana">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius gravida consectetur. Phasellus ac feugiat magna. Donec aliquam vulputate velit eu sodales. Etiam eu diam tincidunt, tincidunt orci ut, vestibulum nisi. Maecenas molestie mi justo, nec venenatis nulla pretium sit amet. Pellentesque nec ex in purus bibendum lacinia. Sed vel dui at nibh imperdiet viverra quis ultrices nulla. Proin tortor est, hendrerit eget posuere ullamcorper, fringilla vitae est. Nulla finibus neque elit, sed faucibus nisi imperdiet sit amet. Proin ac nisl nec enim lacinia porta a elementum eros. Curabitur porta facilisis enim non fringilla. Praesent ac convallis arcu.</p>
            <a href="#">Mai mult...</a>
        </div>
    </div>
</section>
<section class="home-sustinem">
    <div class="container">
        <div class="row justify-content-center">
              <h1 class="col-md-6 display-4">
                Cum te sustinem?
              </h1>
        </div>
        <div class="row justify-content-center">
            <div class="home-cum-sustinem col-md-8">
            <p class="lead home-descriere-persoana">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius gravida consectetur. Phasellus ac feugiat magna. Donec aliquam vulputate velit eu sodales. Etiam eu diam tincidunt, tincidunt orci ut, vestibulum nisi. Maecenas molestie mi justo, nec venenatis nulla pretium sit amet. Pellentesque nec ex in purus bibendum lacinia. Sed vel dui at nibh imperdiet viverra quis ultrices nulla. Proin tortor est, hendrerit eget posuere ullamcorper, fringilla vitae est. Nulla finibus neque elit, sed faucibus nisi imperdiet sit amet. Proin ac nisl nec enim lacinia porta a elementum eros. Curabitur porta facilisis enim non fringilla. Praesent ac convallis arcu.</p>
            <a href="#">Mai mult...</a>
        </div>
    </div>
</section>
<section class="home-services">
    <div class="container">
        <div class="row justify-content-center">
              <h1 class="col-md-6 display-4">
                Servicii oferite
              </h1>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-3 eq-height">
              <div class="home-service">
              <h1>Serviciu 1</h1>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius gravida consectetur. Phasellus ac feugiat magna. Donec aliquam vulputate velit eu sodales. Etiam eu diam tincidunt, tincidunt orci ut, vestibulum nisi. Maecenas molestie mi justo, nec venenatis nulla pretium sit amet. Pellentesque nec ex in purus bibendum lacinia. Sed vel dui at nibh imperdiet viverra quis ultrices nulla. Proin tortor est, hendrerit eget posuere ullamcorper, fringilla vitae est. Nulla finibus neque elit, sed faucibus nisi imperdiet sit amet. Proin ac nisl nec enim lacinia porta a elementum eros. Curabitur porta facilisis enim non fringilla. Praesent ac convallis arcu.</p>
              <a href="#">Mai mult...</a>
            </div>
            </div>
            <div class="col-md-3 eq-height">
                <div class="home-service">
                <h1>Serviciu 2</h1>
                <p class="lead">Nunc dignissim faucibus tellus in aliquet. Donec fringilla diam nec ipsum laoreet rhoncus. Maecenas pulvinar lobortis imperdiet. Praesent non accumsan sem, quis placerat neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam non hendrerit metus. Etiam sit amet erat rhoncus, placerat magna at, cursus arcu. Proin maximus aliquet felis. Nullam eu commodo sapien. Donec varius sem eget tristique pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget eleifend massa. Aliquam eu quam sodales, gravida diam at, ullamcorper ligula. Morbi venenatis lobortis velit sed egestas.</p>
                <a href="#">Mai mult...</a>
              </div>
            </div>
            <div class="col-md-3 eq-height">
                <div class="home-service">
                <h1>Serviciu 3</h1>
                <p class="lead">Nullam et aliquam urna. Nulla facilisi. Aliquam aliquet, ante sit amet dictum efficitur, quam nisi maximus lorem, vel tempor neque neque vel lectus. Suspendisse vel nulla dapibus, tempor lacus quis, bibendum dui. Phasellus tincidunt, ante vitae hendrerit varius, libero neque auctor dui, quis consequat purus ante eu sapien. Curabitur nisl magna, auctor vel varius sit amet, bibendum at magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla convallis faucibus mi, a elementum libero. Vivamus vitae viverra sapien. Aliquam imperdiet commodo scelerisque.</p>
                <a href="#">Mai mult...</a>
              </div>
            </div>
        </div>
    </div>
</section>
<section class="home-echipa">
    <div class="container">
        <div class="row justify-content-center">
              <h1 class="col-md-6 display-4">
                Testimoniale
              </h1>
        </div>
    <div class="row justify-content-center">
          <img src="img/user.png" class="home-echipa-poza-persoana">       
    </div>
    <div class="row justify-content-center">
          <h4 class="home-echipa-functie">CEO</h4>       
    </div>
    <div class="row justify-content-center">
        <h3 class="home-echipa-nume">Prenume Nume</h4>  
    </div>
    <div class="row justify-content-center">
        <div class="col-md-7">
        <p class="lead home-descriere-persoana">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius gravida consectetur. Phasellus ac feugiat magna. Donec aliquam vulputate velit eu sodales. Etiam eu diam tincidunt, tincidunt orci ut, vestibulum nisi. Maecenas molestie mi justo, nec venenatis nulla pretium sit amet. Pellentesque nec ex in purus bibendum lacinia. Sed vel dui at nibh imperdiet viverra quis ultrices nulla. Proin tortor est, hendrerit eget posuere ullamcorper, fringilla vitae est. Nulla finibus neque elit, sed faucibus nisi imperdiet sit amet. Proin ac nisl nec enim lacinia porta a elementum eros. Curabitur porta facilisis enim non fringilla. Praesent ac convallis arcu.</p>
      </div>
    </div>
    </div>    
</section>
<section class="home-proiecte">
    <div class="container">
       <div class="row justify-content-center">
            <h1 class="col-md-6 display-4">
                Proiecte in derulare
            </h1>
        </div>
        <div class="row proiecte-logos">
            <div class="col-md-6 text-center">
                proiect1logo
            </div>
            <div class="col-md-6 text-center">
                proiect2logo
            </div>
        </div>
    </div>
</section>
<footer>
        <nav class="navbar navbar-nav bg-orange navbar-footer">
           <div class="row footer-div">xx</div>
           <div class="row footer-div">xx</div>
       </nav>
       </footer>  
       </body>
       <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
       <script src="javascript/js.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>

这是我正在谈论的优势的屏幕截图： click

那么这个空格是从哪里来的，我该如何解决呢？

2 个答案:

答案 0 :(得分：1)

如您的屏幕快照所示，问题在于标题太大，实质上使页面比视口更宽。

解决方案

有几种解决方法，最简单的方法是使用change the font size来media query。

您还可以按照约翰·史密斯（John Smith）的建议进行以下操作：

  • 在容器上应用overflow: hidden;
  • 应用word-break: break-all;

答案 1 :(得分：0)

横幅上的字体大小导致右侧的空白。将字体大小减小到此分辨率。它将解决您的问题

相关问题
最新问题