如何刪除我網站的這些空格？

Question

我正在為我的服務器制作一個商店，該商店只允許我編輯我正在做的 css，但是在商店中，屏幕右側、頂部和底部有一個巨大的空白區域。

我嘗試尋找 css 解決方案，但沒有一個有效。

我該如何解決？

網站： http : //purgepvp-mc.tebex.io/? theme= 174117

**CSS*：*

        @import url(http://fonts.googleapis.com/css?family=Lato;
    @import url(http://fonts.googleapis.com/css?family=Futura);

    .header {

        background-size: cover;
        padding: 20px;
        margin: 0;
        background-image: url("https://i.imgur.com/eFt7yL2.jpg");        

    }

    .progress-bar {

      background-color: #592e89  

    }

    body > .container {
        width: 100% !important;
        padding: 0 !important;
        background: #757575;
    }


    .panel-heading {

        border-radius: 0px !important;
        border: 0px !important;
        height: 40px !important;
        background-color: #592e89 !important;
        color: #FFF !important;
        border-radius: 0px !important;


    }

    .logo {





    }

    .panel {

        border: none !important;
        border-radius: 0px !important;


    }

    .panel-body {


        color: #FFF !important;
        border-radius: 0px !important;
        background-color: #3a3a3a;

    }


    .content {


        border: none !important;


    }

    .navbar {

        border-radius: 1px;
        color: white;
        background-color: #592e89;
        border: none !important;

    }


    .donation-goal {

        font-weight: bold;

    }

    .nav {
        margin: 0 auto;
        text-align: center;
        display: block;
        width: max-content;
        float: initial;'
        font-weight: bold;'

    }

    .nav a, .nav li {
        color: #FFF !important;
        transition: all 0.2s linear;
        text-decoration: none !important;
        font-weight: bold;
    }



    .nav li:hover, .nav li:hover a {
        background-color: #3a3a3a;
        color: #FFF !important;
        text-decoration: none !important;
        border-radius: 20px;
        font-weight: bold;

    }






    @-webkit-keyframes pulse {
      0% {
        -webkit-transform: scale(1);
      }
      50% {
        -webkit-transform: scale(1.1);
      }
      100% {
        -webkit-transform: scale(1);
      }
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
      }
    }




    .logo img {
        content: url('https://i.imgur.com/S7Lfi8X.jpg');
        height: initial !important;
        width: 600px;
        margin: 0 auto;
        display: block;
    }

    .logo {
        width: 100% !important;
      animation: pulse 3s infinite;
      margin: 0 auto;
      display: table;
      margin-top: 50px;
      animation-direction: alternate;
      -webkit-animation-name: pulse;
      animation-name: pulse;
    }



    .footer {

        border-top: 5px solid #592e89;
        background-color: #3a3a3a;
        padding-bottom: 30px;
        font-weight: bold;

    }

Answer 1

默認情況下有可用的保證金，例如

<head>
   title scripts etc.
</head>
<body>
    <header class="...">your html</header>
    <div class="..."></div>
</body>

給 body 一個 id 或 class 並在 body class 或硬代碼中使 margin = 0

<body style="margin:0;">
    <header class="...">your html</header>
    <div class="..."></div>
</body>

這將防止空白。

Answer 2

您的徽標導致了這種情況。 添加這個css

body .container {
  overflow-x: hidden;
}

.container .body {
  margin-right:0px;
  margin-left:0px;
}

body {
  margin-top: 0px !important; /*in your syle.min.css, it makes the margin-top:20px*/
}

如何刪除我網站的這些空格？

問題描述

2 個解決方案

解決方案1
0 2018-09-30 06:40:33

解決方案2
0 已采納 2018-09-30 06:51:57

如何刪除我網站的這些空格？

問題描述

2 個解決方案

解決方案1 0 2018-09-30 06:40:33

解決方案2 0 已采納 2018-09-30 06:51:57

解決方案1
0 2018-09-30 06:40:33

解決方案2
0 已采納 2018-09-30 06:51:57