-2

what am trying to do is place a div in center of my section i tried margin: 2% auto; but it looked like this (the background isn't filled)

the background isn't filled this is the link to the code https://jsfiddle.net/medbenzekri/7gc2j9bk/1/

this is my html

{%load static%}
<!DOCTYPE html>
<html lang="en">
 <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!--  CSS -->
   <link rel="stylesheet"  href={%static 'css/translate_page.CSS' %}>
   <link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet'>

 <title>translate</title>
 <script src="https://kit.fontawesome.com/a076d05399.js"></script>
 </head>
 <body>
 {% include "nav.html" %}
 <style>
  a.active-translate-page{
  background:  #33ccff ;
 </style>
 </body>
 <section class="container">
 <div class="the-form">
 
 </div>
 </section>
 
</html>

and this is my css

*{
   padding: 0;
   margin: 0;
   text-decoration: blink;
   list-style: none;
   box-sizing: border-box;
}
body {
 font-family: montserrat;
}
.container{
display: block;
background: linear-gradient(to bottom, #33ccff 5%, #7882F3 50%);
background-size : cover;
height: calc(100vh - 80px);
}

.the-form{
width: 600px;
height: 500px;
background: #fff;
margin: 2%   auto ;
border-radius: 2%;

}

and btw am using django

med benzekri
  • 490
  • 6
  • 19

1 Answers1

0

You may try the flex layout in this case:

.container {
    display: flex;
    background: linear-gradient(to bottom, #33ccff 5%, #7882f3 50%);
    background-size: cover;
    width: 100%;
    height: calc(100vh - 80px);
    align-items: center;
    justify-content: center;
}

.the-form {
    width: 600px;
    height: 500px;
    background: #fff;
    border-radius: 2%;
}
zhonglin yang
  • 61
  • 4