title: Issue in expanding the width of the form in css
body: <p>I have a screenshot of the form (its in pc view) as shown below which I have to replicate in HTML/CSS. </p>
  
  <p><a href="https://i.stack.imgur.com/5Mvmm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Mvmm.jpg" alt="enter image description here"></a></p>
  
  <p>I have created the <a href="https://jsfiddle.net/nc2djn5p/228/embedded/result/" rel="nofollow noreferrer">fiddle</a> for the above screenshot. </p>
  
  <p><br>
  <strong>Problem Statement:</strong></p>
  
  <p><strong>(1)</strong> I am wondering what changes I need to do in the fiddle so that <strong>I am able to expand the width of the form as marked by arrow in the screenshot above</strong>. </p>
  
  <p>I tried playing with the <strong>margin and padding of the form class</strong> as shown below but it didn't work. </p>
  
  <p>Whenever <strong>I increase the padding of the form, the input fields inside the form seems to go all over the place</strong>. </p>
  
  <pre><code>.form {
      background: #FFFFFF;
      max-width: 360px;
      margin: 0 auto 100px;
      padding: 45px;
      text-align: center;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)
  }
  </code></pre>
  
  <p><br><br>
  <strong>(2)</strong> Also, what changes I should make in the CSS, so that I can push the form (<strong>as marked with orange sign in the form</strong>) little bit towards the bottom. </p>