Search code examples
htmlcssmaterialize

Content outside the body - My body is out of control

I hope you are fine.

I am using MaterializeCss to create a <Form> to calculate craftsman invoice. The user should type a number or pick a item. So far, so good.

I need to center it all, except the buttons, they need space between.

As long as I use full screen - everythink works fine. Here is my issue, my body container is our of control. I dont know why the content doesn't center...

Google Dev Console

MY CODE:

#buttonarea {
    display: flex;
    justify-content: space-between;
}

h1 {
    font-size: 2rem;
}

.row {
    margin: 0;
}

.col {
    margin: 0;
}

.container {
    margin-left: 25%;
    margin-right: 25%;
}

<!DOCTYPE html>
<html>
  <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- <div class="col s2">left              
            </div> -->
            <div class="col s12 center-align">
                <p><h1>Kostenrechner</h1></p>
                <p>Um die Kosten für dein Projekt einschätzen zu können, benötigen wir eineige Informationen von Dir. <br> Trage die Fläche in m² ein.</p>
              <div class="row center-align">
                <div class="col s12">
                  <div class="row">
                    <div class="input-field col s12">
                        <input id="areaToClean"  type="number">
                        <label for="areaToClean">Trage deine Fläche in m² ein.</label>
                      </div>
                  </div>
                </div>
              </div>                  
              <div class="row center-align">
                <div class="input-field col s12">
                    <p>
                        oder
                    </p>
                  </div>
              </div>                  
              <div class="row center-align">
                <div class="input-field col s12">
                    <select>
                      <option value="" disabled selected>Choose your option</option>
                      <option value="1">Option 1</option>
                      <option value="2">Option 2</option>
                      <option value="3">Option 3</option>
                    </select>
                    <label>Materialize Select</label>
                  </div>
              </div><br><br>
              <div class="row">
                <div class="col s12" id="buttonarea">
                    <a class="waves-effect waves-light btn red"><i class="material-icons left">navigate_before</i>zurück</a>
                    <a class="waves-effect waves-light btn green"><i class="material-icons right">navigate_next</i>weiter</a>
                </div>
              </div>
              
              <div class="row center-align">
                  <div class="col s12">
                <ul class="pagination">                    
                    <li class="active"><a href="#!">1</a></li>
                    <li class="waves-effect"><a href="#!">2</a></li>
                    <li class="waves-effect"><a href="#!">3</a></li>
                    <li class="waves-effect"><a href="#!">4</a></li>
                    <li class="waves-effect"><a href="#!">5</a></li>                    
                  </ul>
              </div></div>
            </div>

          </div>
    </div>
    <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Solution

  • I forgot to style:

    body {
    display: flex;
}