Вопрос по верстке

Question

Как сделать чтоб при сплющивании окна блоки сначала занимали место отступов справа и слева и только потом сплющивались а не так как на картинке. Пробовал делать не через маржины а просто через лефт райт, но тогда при сплющивании окна ничего не происходило и блок тупо уходил вникуда.

body {
    font-family: fantasy;
    background-image: url(metal-grid.jpg); 
    
}
header{
   color: white;
   font-size: 72px;
   background-color: black;
   border-color: white;
   border-style: solid;
      
    
   margin-left: 200px;
   margin-right:  200px;
   border-width: 6px;
}
.name{
  position: relative;
margin-top: 52px;  
    margin-left: 231px;
    left: 20px;
    
    
}
.login{
    font-size: 30px;
    background-color: black;
   border-color: white;
   border-style: solid;
   text-align: center;
      position: relative;
     bottom: 90px;
      margin-left: 80%; 
      
      
}
.login a{
    display: block;
      height: 100%;
    text-decoration: none;
    color: white;
}
.signup{
    font-size: 30px;
    background-color: black;
   border-color: white;
   border-style: solid;
   text-align: center;
    margin-left: 80%;
       position: relative;
       bottom: 50px;
}
.signup a{
    display: block;
      height: 100%;
      text-decoration: none;
      color: white;
}






.bod{
    
    background-color: black;
   border-color: white;
   border-style: solid;
    padding-bottom: 1000px;
    margin-left: 200px;
   margin-right:  200px;
   margin-top: 40px;
     border-width: 6px;
    
    
}

<!DOCTYPE html>
<html>

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

<body>
    
        <header>
            <div class="name"> Bondage gay website </div>
           <div class="login"> <a href="login.php"> LOGIN </a></div>
            <div class="signup"><a href="login.php"> SIGN UP </a></div>
        </header>
        
    
    <div class="bod">
        
        
    </div>

    
    
    
    
    
    
    
    
    
    
    

</body>


</html>

БЛОГ НА HUSL

Вопрос по верстке

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