0

Hi I'm currently working on a website project for a "fictional plane company". I want to be able to center the "main div" but for some reason I have a lot of margin at the right side. I've tried setting margin to 0 and setting width to 100%, but I can't figure out the problem. 

.main{
  position: absolute;
  margin: 0px;
  align-items: center;
  width: 80%;
  line-height: 2em;
  display: flex;
  flex-direction: column;
}
<div class="main">
    <div class="">
        <h1>Bestill fin flyreise</h1>
        <select class="" name="">
            <option value=""><-- Fly fra--></option>
            <option value="">Sarpsborg</option>
            <option value="">Fredrikstad</option>
            <option value="">Askim</option>
            <option value="">Moss</option>
            <option value="">Halden</option>
        </select>
        <select class="" name="">
            <option value=""><-- Fly fra--></option>
            <option value="">Sarpsborg</option>
            <option value="">Fredrikstad</option>
            <option value="">Askim</option>
            <option value="">Moss</option>
            <option value="">Halden</option>
        </select>
        <p>Utreisedato</p>
        <input type="date" name="" value="">
        <p>Antall reisende</p>
        <input type="number" name="" value="" max="5">
        <label for="">
        <input type="radio" name="" value=""> VIP plass (250,-)
        </label>
        <button type="button" name="button">Bestill flyreise</button>
    </div>
</div>

JSFiddle: https://jsfiddle.net/znvgx143/

TylerH
  • 20,799
  • 66
  • 75
  • 101

2 Answers2

0

Just change the margin value to margin: 0px auto; in the CSS rule for .main. The auto value for left and right margin does the centering. (Note: This particular method of centering has nothing to to with flexbox, which would be able to center children elements by using justify-content: center, but not the element itself)

https://jsfiddle.net/tczeq586/

Johannes
  • 64,305
  • 18
  • 73
  • 130
0
.main{
  margin: 0 auto;
  align-items: center;
  width: 80%;
  line-height: 2em;
  display: flex;
  flex-direction: column;
}

The "auto" after your 0px should fix it :)

paytoncodes
  • 92
  • 8