爲什麼在我的Phonegap應用程序中，只有填充左側應用了100％的最小寬度？

我真的是一個非常初學CSS的人，並且有一些問題。對於這個問題，我真的試圖找到一個答案（並閱讀關於保證金，填充，框系統，...）的幾頁，但我找不到解決方案。爲什麼在我的Phonegap應用程序中，只有填充左側應用了100％的最小寬度？

我正在開發Phonegap應用程序，現在我試着讓應用程序看起來更好看一些。爲此，我希望所有元素都居中，並且灰色背景應位於整個頁面上。爲了達到這個目的，我把它全部放在一個div類中，它的最小寬度和最小高度都設置爲100％。現在我想讓元素在左側和右側有一個填充，以便它們不會完全粘在頁面的邊緣。我的問題是隻應用了填充左側（如果我將該值設置得越大，則左側的填充越大，並在元素太大時將元素移出屏幕），但填充右側完全被忽略。

我的HTML標記：

<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="msapplication-tap-highlight" content="no" /> 
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
    <title>Home Automatization</title> 

</head> 

<body> 

    <div class="app"> 
     <h1>Relay switch</h1> 
     <br> 
     <br> 
     <br> 
     <br> 
     <h2> TextTextTextTextTextTextTextTextText</h2> 
     <br> 
     <form> 
     <label for="relay-switch">Relay:</label> 
     <input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1" onchange="changeHandler()"> 
     </form> 
     <br> 
     <br> 
     <button id="logout">Logout</button> 
    </div> 

</body>

相關的CSS：

.app { 
background-color:#E4E4E4; 
position:fixed;    
min-height:100%; 
min-width:100%; 
padding-top:60px; 
padding-left:5px; 
padding-right:5px; 
text-align:center;

非常感謝您提前如果有人能幫助我。

來源

2016-02-10 DesperateEi