External elements - My physical being is in a state of chaos

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>

Answer №1

I completely overlooked adding styling to:

body {
    display: flex;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to conceal the parent element when the child element is hidden from view?

Wanting to remove the stars badge in the review section of a Shopify store when there are 0 reviews for the product. The goal is to have the badge appear automatically once a review is received. Here's the code snippet: HTML <div class="spr- ...

Regularly fetching images from PHP page

Recently, I encountered a challenge with a PHP page that retrieves arguments from the URL to generate an image. The image type (png, gif, etc.) is unknown. Typically, the page is used to embed the image in a standard HTML page like so: <img src="page.p ...

Validate all JavaScript buttons by binding a click event

I've implemented the JS validation plugin from this source and it's functioning properly. However, it captures all button clicks on the page, including when I click on Back to Home, triggering form validation unnecessarily. I only want the form ...

What's the best way to implement a font family in a React component?

I'm currently attempting to implement the font found at: https://fonts.google.com/specimen/Source+Code+Pro After downloading the font into my directory, it appears as shown in this image: enter image description here This is how I have it set up: &l ...

Incorporate an XNA game directly into a website

Is it possible to launch an XNA game directly from a web page without the need for any installations? Something along the lines of Java, Silverlight, or similar to WPF Browser Applications (XBAP). Situation: Visit a webpage, Prompted to install the g ...

Uploading pictures to a database using PHP and SQL

Anyone have a reliable php and sql code for image upload to a database? The ones I've found are glitchy and not supported by all browsers. Any suggestions? ...

`Is it challenging to convert JSON into HTML, leading to undefined results?`

I am currently attempting to extract YAHOO data by utilizing getJSON and YQL. Although the connection is successful, I can retrieve the data and log it in the console. However, I am facing difficulties when trying to display this data on the JSP page I am ...

What is the reason behind the android code being incompatible with IOS operating systems?

I'm encountering an issue where a particular code is working on Android, but not on IOS. The code in question involves using JavaScript to differentiate the items in a list within an HTML select tag. It's perplexing to me how the code can operat ...

Effortlessly switch between CSS animation styles while adjusting animation settings

My HTML element with animation is defined as follows: <div id="box"></div> The box starts by moving 200 pixels to the right, taking 4 seconds to complete. .anim { animation-name: anim; animation-duration: 4s; animation-t ...

What is the best way to split a single column into two using blocks?

I am working with a container that currently has all its blocks lined up in a column. I need to divide them into two columns, with 5 blocks in each. Unfortunately, the plugin I am using generates the code for me and does not allow me to insert my own div e ...

Disappear scrollbar when overlay is activated

How can I hide the scroll bar when an overlay is displayed on my page? .overlay{ display: none; opacity:0.8; background-color:#ccc; position:fixed; width:100%; height:10 ...

Incorporate Thymeleaf's HTML using the powerful JavaScript framework, jQuery

I am facing an issue where the Thymeleaf rendered HTML code is not being displayed by the Browser when I try to insert it using JavaScript. $('<span [[$ th:text#{some.property.key}]] id="counter" class="UI-modern"> </ ...

I have a question regarding the CSS universal selector

I've been working on developing a website, but I'm having trouble with the universal selector. No matter how many times I try, it just won't work. If you'd like to see an example of what I'm dealing with, check out this link: https ...

Is there a way to sequentially load two iframes, with the second one loading only after the first one is fully loaded

Having two different links that trigger ajax calls can be tricky if only one request is allowed per load. This may result in both iframes displaying the same data. Is there a way to work around this issue? Perhaps loading one iframe first and then triggeri ...

An error was encountered involving an unexpected token < at the beginning of a JSON file while using express with firebase

After setting up an authentication system in express using firebase auth, I established an endpoint in my express server: app.post('/users/login', (req, res) => { console.log('logging in...'); firebase.auth().signInWithEmail ...

Trouble with sending SMTP emails from Flask app (Error 500)

Currently, I am in the process of developing a website using Python and Flask where I have successfully implemented a Contact Form Modal. The modal opens up smoothly allowing me to fill it out (many thanks to the supportive community <3), however, upon ...

Capture video frames from a webcam using HTML and implement them in OPENCV with Python

While many may find it simple, I am facing a challenge in extracting video frames from HTML or JavaScript and utilizing them in my Python OPENCV project. I have a strong background in Python OPENCV and Deeplearning, but lack knowledge in HTML and JavaScr ...

Redirection with Mod_Rewrite

I'm currently facing an issue with mod_rewrite on my hosting platform. Everything was working smoothly until I decided to reorganize my directories. As a result, all the pages that were previously indexed by Google now have an incorrect extension. I o ...

What are some techniques to ensure a bookmark retains its original style even when the cursor hovers over it?

My CSS skills are limited, so I am facing what may seem like a basic issue. On my website, I have a table of contents with links structured like this: <a href="#user-interface">User interface</a> Additionally, there is a bookmark in another ...

The malfunctioning buttons are a result of embedding PHP code within a JavaScript if-query

I am experiencing an issue where my buttons are not functioning properly, preventing me from clicking on them. All variables have been correctly assigned values. Can someone assist me in resolving this? Thank you. ?> <script> ...