Простой вопрос по вёртске

Question

у врапера минимум видтх 1200пкс, у хедера 100% видтх, у кнопок логин 50% видтх и у сигнап тоже, но откуда появляется этот артефакт??? юзал ресет.css не помогает. Помогите плиз разобраться!!

body {
    font-family: fantasy;
    background-image: url(metal-grid.jpg); 

}
.wrapper {
    max-width: 1200px;
    min-height: 1200px;
    margin: 0 auto;
}
@media(max-width:1200px){
    .wrapper {
        max-width: 970px;


    }
}
@media(max-width:992px){
    .wrapper {
        max-width: 750px;


    }
}
@media(max-width:767px){
    .wrapper {
        max-width: none;


    }
    .log{
        display: flex;
        flex-direction: column;

    }

}

.cats{
    overflow: hidden;
    display: flex;
    flex-direction: row;
    margin: 0;
    flex-shrink: 1;
}
header{ 
    color: white;
    font-size: 72px;
    background-color: black;
    border-color: white;
    border-style: solid;
    border-width: 6px;
    width: 100%;


    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;

}
.cat{
    transition:  0.5s ease;
}
.cat:hover{
    transform: scale(2,2);

}


.log{

    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}



.login{ 

    border-width: 1px;
    font-size: 30px;
    background-color: black;
    border-color: white;
    border-style: solid;
    text-align: center;
    width: 50%;

}
.login a{
    display: block;
    height: 100%;
    text-decoration: none;
    color: white;
}
.signup{ 

    border-width: 1px;
    font-size: 30px;
    background-color: black;
    border-color: white;
    border-style: solid;
    text-align: center;
    width: 50%;
}
.signup a{
    display: block;
    height: 100%;
    text-decoration: none;
    color: white;
}


.signup a:hover{
    background-color: red;
    color: black;
}

.login a:hover{
    background-color: red;
    color: black;
}

.bod{display: flex;
     width: 100%;
     background-color: black;
     border-color: white;
     border-style: solid;
     min-height: 1200px;

     border-width: 6px;


}

@media(max-width:767px){

    .log{
        display: flex;
        flex-direction: column;

    }
    .login{ width: 100%;}

    .signup{
        width: 100%;
    }

}

<!DOCTYPE html>
<html>

    <head>
        <title> Bondage gay website </title>
        <link type="text/css" rel="stylesheet" href="reset.css">
        <link type="text/css" rel="stylesheet" href="css.css">

        <meta name="viewport" content="width=device-width">
    </head>

    <body>



        <div class="wrapper">

            <div class="cats"><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/> <img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/> <img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/> <img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/> <img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/>
                <img class="cat" src="1x.gif"/> <img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/> <img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/> <img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/> <img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/> <img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/> <img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/><img class="cat" src="1x.gif"/>
            </div>
            <header>
                Bondage gay website  

            </header>

            <div class = "log">
                <div class="login"> <a href="login.php"> LOGIN </a></div>
                <div class="signup"><a href="login.php"> SIGN UP </a></div>
            </div>

            <div class="bod">


            </div>


        </div>










    </body>


</html>

Answer 1

Добавьте в CSS:

div { box-sizing: border-box; }

БЛОГ НА HUSL

Простой вопрос по вёртске

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