title: CSS alignment to fit different screen resolutions
body: <p>I am new to HTML and CSS. I am using ImpactJS engine and currently working on UI for some elements in my web game. I am trying to add an input box and call it using Jquery in my javascript files in the game. I got everything working till now but when I am trying to adjust my text input box and submit button to be fixed and not change with different screen resolutions but currently it doesn't seem to be working. The input box and submit button change their size and width according to different screen resolutions. Below is my CSS file</p>
  
  <p>I also tried looking into other similar forums and tried changing the position to absolute but doesn't work too.</p>
  
  <pre><code>    #problemdisplay {
          position: absolute;
          margin-top: 10%;
          width: 100%;
      }
      #problemform {
          width: 50%;
          margin-left: auto;
          margin-right: auto;
          padding: 280px 2px 15px 400px;
      }
      #probleminput {
          display: none;
          width: 45%;
          margin-left: 5.5%;
          margin-right: 5.5%;
          padding: 35px 5px 15px 20px;
      }
      #problemsubmit {
          display: none;
          width:5%;
          padding: 15px 10px 8px 2px;
      }
      #prob_submit_msg {
          width: 50%;
          margin-left: auto;
          margin-right: auto;
          text-align: center;
      }
      #canvaswrapper {
          margin: 15px;
          position: relative;
      }
      #canvas {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
      }
  </code></pre>
  
  <p>Any help would be much appreciated.</p>