Question 44593 in Html Question posted in
Some basic documentation can be found here.

how can I adjust this div to not stretch the entire browser from left to right – Html

I am trying to build a box around this login form but I can’t figure out how to lose the stretch from left to right. Any pointers? I will include the code and screenshot below.enter image description here

display          : flex; 
justify-content  : center; 
align-items      : center; 
margin           : 140px 0px 125px 0px;  
box-sizing       : content-box; 
border           : solid #2356a7 10px;
padding          : 5px; 
border-radius    : 20px; 
padding-top      : 20px; 
padding-bottom   : 20px; 
background-color : #f4f4f4;
Tags:

2

Answers


  1. 0

    you need to just add width, i’m not sure but i think it solve it

    Login or Signup to reply.
  2. 0

    There are a lot of options here.

    The easiest one is to add width and set auto margins:

    width: 300px;
display:flex; 
justify-content: center; 
align-items: center; 
margin: 140px auto 125px;  
box-sizing: content-box; 
border: solid #2356a7 10px;
padding: 5px; 
border-radius: 20px; 
padding-top: 20px; 
padding-bottom: 20px; 
background-color: #f4f4f4;

    Another one is to wrap this div into another one:

    <div class="wrapper">
   <div class="form">...your form</div>
</div>

    and add styles:

    .wrapper {
  display: flex;
  justify-content: center;
}
.form {
  display:flex; 
  justify-content: center; 
  align-items: center; 
  margin: 140px 0px 125px 0px;  
  box-sizing: content-box; 
  border: solid #2356a7 10px;
  padding: 5px; 
  border-radius: 20px; 
  padding-top: 20px; 
  padding-bottom: 20px; 
  background-color: #f4f4f4;
}
``
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search