title: How can I sort / format my HTML input, with their titles in a row, at the middle of my page?
body: <p>I've tried to put my inputs in a row with flexbox, but my background for the div container, which lies above, was ignored after reloading.</p>
  <p>My task was, to build a simple calculator in JS and I want it to look not like complete garbage.</p>
  <p>In the end, the inputs should be centered among themselves.</p>
  <p>Here is my code so far:</p>
  <p>I am German so don't wonder if you do not understand everything.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*
  Zahlen oben:
  1 Kommazahl in1                            in1
  2 Kommazhal in2                            in2
  --------------------------------------------------------------
  Maximum der Zahlen                         outmax
  Minimum der Zahlen                         outmin
  1 Zahl aufgerundet                         out1aufround
  2 Zahl abgerundet                          out2abround
  1 Zahl ^2 Zahl (                           out1hoch2round
  Wurzel aus Zahl 1                          outroot1round
  Zufallszahl                                outrandomnumber
  Positive Differenzv von Zahl 1 und 2       outposdif1to2
  --------------------------------------------------------------
  Knopf der alle Berechnungen auslöst        knopf
  */
  
  var input1 = in1.value;
  var input2 = in2.value;
  
  function maximum() {
    outmax.value = Math.max(input1, input2);
  }
  
  function mainimum() {
    outmin.value = Math.min(input1, input2);
  }
  
  function oneUpRound() {
    out1aufround.value = Math.ceil(input1);
  }
  
  function twoDownRound() {
    out2abround.value = Math.floor(input2);
  }
  
  function round1Hoch2() {
    out1hoch2round.value = Math.round(Math.pow(input1, input2));
  }
  
  function root1Round() {
    outroot1round.value = Math.round(Math.sqrt(input1));
  }
  
  function randomnumber() {
    outrandomnumber.value = Math.round(Math.random() * 10000);
  }
  
  function posdif1to2() {
    var maxwert = Math.max(input1, input2);
    var minwert = Math.min(input1, input2);
    outposdif1to2.value = maxwert - minwert
  }
  
  function knopfigerKnopf() {
    maximum();
    mainimum();
    oneUpRound();
    twoDownRound();
    round1Hoch2();
    root1Round();
    randomnumber();
    posdif1to2();
  }
  
  knopf.onclick = knopfigerKnopf</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: black;
    color: white;
  }
  
  #Mathemann {
    background-color: rgb(40, 40, 40);
    margin: 10px;
    color: white;
    text-align: center;
    border-radius: 10px;
    padding: 5px;
    overflow: hidden;
  }
  
  #input {
    margin: 10px;
    padding: 15px;
    color: white;
    text-align: left;
  }
  
  #knopf {
    align-items: center;
    margin: auto;
    padding: 10px;
  }
  
  @media (max-width: 600px) {
    #Mathemann {
      font-size: 12px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Rechnender Rechner&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="Mathemann"&gt;
      &lt;h1&gt;Mathematische Funktionen&lt;/h1&gt;
      &lt;div id="input"&gt;
        &lt;p&gt;Erste Zahl: &lt;input id="in1" type="number" step="0.01"&gt;&lt;/p&gt;
        &lt;p&gt;Zweite Zahl: &lt;input id="in2" type="number" step="0.01"&gt;&lt;/p&gt;
        &lt;button id="knopf"&gt;Felder berechnen&lt;/button&gt;
        &lt;p&gt;Maximum der Zahlen: &lt;input id="outmax" type="number" step="0.01" readonly&gt;&lt;/p&gt;
        &lt;p&gt;Minimum der Zahlen: &lt;input id="outmin" type="number" step="0.01" readonly&gt;&lt;/p&gt;
        &lt;p&gt;1. Zahl aufgerundet: &lt;input id="out1aufround" type="number" step="0.01" readonly&gt;&lt;/p&gt;
        &lt;p&gt;2. Zahl abgerundet: &lt;input id="out2abround" type="number" step="0.01" readonly&gt;&lt;/p&gt;
        &lt;p&gt;1. Zahl ^2. Zahl (gerundet): &lt;input id="out1hoch2round" type="number" step="0.01" readonly&gt;&lt;/p&gt;
        &lt;p&gt;Wurzel aus Zahl 1 (gerundet): &lt;input id="outroot1round" type="number" step="0.01" readonly&gt;&lt;/p&gt;
        &lt;p&gt;Zufallszhal: &lt;input id="outrandomnumber" type="number" step="0.01" readonly&gt;&lt;/p&gt;
        &lt;p&gt;Positive Differenzv von Zahl 1 und 2: &lt;input id="outposdif1to2" type="number" step="0.01" readonly&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>