css grid появляются отступы

Question

как сделать задний фон весь экран чтобы не было никаких отступов

.wrapper {
    display: grid;
    background-image: url('http://www.gpsprecision.com/wp-content/uploads/2016/04/bg-1920-1080.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: auto;
}

.header {
    width: 70%;
    background-color: purple;
    height: 100px;
    margin: auto;
    grid-template-columns: 1fr;
}

.header-text {
    width: 50%;
    height: 50px;
    background-color: yellowgreen;
    margin: auto;
    grid-template-columns: 1fr;
    margin-top: 10%;
}

.header-buttons {
    background-color: yellow;
    height: 200px;
    width: 50px;
    grid-template-columns: 1fr;
    margin-left: 80%;
    margin-top: 5%;
}

body {
    background-color: yellowgreen;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="wrapper">
        <div class="header"> </div>

        <div class="header-text"></div>

        <div class="header-buttons"></div>


    </div>



    <script src="./script/script.js"></script>
</body>

</html>

Answer 1

.wrapper {
    display: grid;
    background-image: url('http://www.gpsprecision.com/wp-content/uploads/2016/04/bg-1920-1080.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: auto;
}

.header {
    width: 70%;
    background-color: purple;
    height: 100px;
    margin: auto;
    grid-template-columns: 1fr;
}

.header-text {
    width: 50%;
    height: 50px;
    background-color: yellowgreen;
    margin: auto;
    grid-template-columns: 1fr;
    margin-top: 10%;
}

.header-buttons {
    background-color: yellow;
    height: 200px;
    width: 50px;
    grid-template-columns: 1fr;
    margin-left: 80%;
    margin-top: 5%;
}

body {
    background-color: yellowgreen;
    margin: 0; #<--------
    padding: 0; #<--------
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="wrapper">
        <div class="header"> </div>

        <div class="header-text"></div>

        <div class="header-buttons"></div>


    </div>



    <script src="./script/script.js"></script>
</body>

</html>

БЛОГ НА HUSL

css grid появляются отступы

Ответы (1 шт):