title: placing everything in center of app messes up `DatePickerSingle` and `RadioItems`
body: <p>I am building a dash app, which as <code>DatePickerSingle</code> and <code>RadioItems</code>. I've placed everything in center to make it look like it's on mobile phone.<br>
  Here's my css to center everything in my app:</p>
  
  <pre><code>html * {
      width: 100%; max-width: 500px; margin: auto;
  }
  </code></pre>
  
  <p>As you can see in the below image, two days from every week are not being displayed and arrows that take the user to next/previous month are shifted.
  <a href="https://i.stack.imgur.com/bqyJJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bqyJJ.png" alt="issue with dates"></a><br>
  Here's my CSS for <code>DatePickerSingle</code>:  </p>
  
  <pre><code>.DateInput{
      margin: 0;
      padding: 0;
      background: #fff;
      position: relative;
      display: inline-block;
      width: 100%;
      vertical-align: middle;
  }
  
  .DayPicker {
      text-align: center;
  }
  
  .DayPicker_transitionContainer {
      position: relative;
      overflow: None;
      border-radius: 3px;
  }
  </code></pre>
  
  <p>Here's how my <code>RadioItems</code> look like after centering:<br>
  <a href="https://i.stack.imgur.com/xwoIo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xwoIo.png" alt="enter image description here"></a>
  --no css for <code>RadioItems</code> --<br>
  But, I've tried to fix it by doing this:  </p>
  
  <pre><code>import dash_core_components as dash_core
  dash_core.RadioItems(id="gender_input",
                       options=[
                                {'label': 'Male', 'value': 'male'},
                                {'label': 'Female', 'value': 'female'}
                               ],
                               style={"align": "left"})
  </code></pre>
  
  <p>These problems arise only when I center everything. Apparently, I'm not good in css and besides the css I provided above, everything is under default styling.  </p>
  
  <p>Please help me solve these.</p>
  
  <p><strong>EDIT 2(after coralvanda's answer):</strong><br>
  I've removed my css of <code>*html</code> and put what you've suggested in my code after children and this is how it looks now:<br>
  <a href="https://i.stack.imgur.com/KQPyO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KQPyO.png" alt="enter image description here"></a>
  Now, two<code>Div</code>s and a <code>Hr</code> before the text are still not being displayed(see the scroll bar).  </p>
  
  <p><strong>EDIT 3(after suggestion for seperate <code>Div</code>s):</strong><br>
  This is how it looks now:<br>
  <a href="https://i.stack.imgur.com/UbcWR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UbcWR.png" alt="enter image description here"></a>
  The code is:  </p>
  
  <pre><code>app.layout = dash_html.Div(children=[
      # radio button with no centering
      dash_html.H4("Do you take anti-hypertensive medication"),
      dash_core.RadioItems(className='Radio-button',
                           id="hypertensive_input",
                           options=[
                               {'label': 'Yes', 'value': 'yes'},
                               {'label': 'No', 'value': 'no'}
                           ]),
  
      # radio button with centering
      # text appears after the radio inputs, when it should be o
      dash_html.Div(children=[
          dash_html.H4("Do you take anti-hyperlipedemic medication"),
          dash_core.RadioItems(className='Radio-button',
                               id="hyperlipedmic_input",
                               options=[
                                   {'label': 'Yes', 'value': 'yes'},
                                   {'label': 'No', 'value': 'no'}
                               ])
      ], style=dict(display='flex', justifyContent='center')),
  
      # an input form with no styling
      dash_html.H4("Enter your Insulin"),
      dash_core.Input(className="input-form", id="insulin_input", placeholder='e.g.: 19.3, 25, 38.2', type='number')
  ])
  </code></pre>