Hello there, I hope everything is well with you.
I have been working on creating a form using MaterializeCss to calculate an invoice for a craftsman. The user is required to input a number or select an item. Everything seems to be going smoothly so far.
My main challenge now is centering all the content, except for the buttons which need some space between them.
When I use full-screen mode, everything functions correctly.
However, the issue arises when it comes to controlling my body container. For some reason, the content just doesn't seem to center as expected...
https://i.sstatic.net/YkBQP.png
This is the code I've been working with:
#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 s12 center-align">
<p><h1>Cost Calculator</h1></p>
<p>In order to estimate the costs for your project, we require some information from you. <br> Please enter the area in square meters.</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">Enter the area in square meters.</label>
</div>
</div>
</div>
</div>
<div class="row center-align">
<div class="input-field col s12">
<p>
or
</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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>