Unwanted horizontal shift of DIVs on mobile screen

My following code implements 2 stages: Once you click the 'Submit', the bottom DIV appears. However, on the mobile screen (I tried both Chrome and Firefox) - once it appears, both DIVs seem to shift horizontally a little, and are no longer centered. Also the left border of the bottom DIV is not shown.

<?php if (isset($_REQUEST['submitClicked'])) $status = "submitClicked"; ?>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width">
    <style>
      body {direction:rtl; margin:0; border:0; padding:0;}
      #topBox {width:90%; margin:0 auto; border:1px; border-style:solid; padding:2% 4%;}
      #bottomBox {width:90%; margin:0 auto; border:1px; border-style:solid; padding:0;}
      #bottomIframe {margin:0 auto; border:0; padding:0;}
    </style>
  </head>
  <body>
    <div id="topBox" align="center">
      <form method="post">
        <input type="hidden" name="submitClicked" id="submitClicked" value="1" />
        <p style="height:500px; background-color:red;">&nbsp;</p>
        <input type="submit" value="Submit" />
      </form>
    </div>
    <?php if ($status=="submitClicked"):?>
    <div id="bottomBox" align="center">
      <iframe src="https://direct.tranzila.com/hofesh/iframenew.php"
        name="bottomIframe" id="bottomIframe" width="370" height="520"></iframe>
    </div>
    <?php endif ?>
  </body>
</html>

Solution

Add CSS for the IFrame.

iframe {
    display:block;
    width:100%;
}

body {
  direction: rtl;
  margin: 0;
  border: 0;
  padding: 0;
}

#topBox {
  width: 90%;
  margin: 0 auto;
  border: 1px;
  border-style: solid;
  padding: 2% 4%;
}

#bottomBox {
  width: 90%;
  margin: 0 auto;
  border: 1px;
  border-style: solid;
  padding: 0;
}

#bottomIframe {
  margin: 0 auto;
  border: 0;
  padding: 0;
}

iframe {
    display:block;
    width:100%;
}

<div id="topBox" align="center">
  <form method="post">
    <input type="hidden" name="submitClicked" id="submitClicked" value="1" />
    <p style="height:500px; background-color:red;">&nbsp;</p>
    <input type="submit" value="Submit" />
  </form>
</div>
<div id="bottomBox" align="center">
  <iframe src="https://direct.tranzila.com/hofesh/iframenew.php" name="bottomIframe" id="bottomIframe" width="370" height="520"></iframe>
</div>