Question: Below is the code. When i am trying to add margin:50px to the inner box, the outer box is also shifting 50px from the top. I think only the inner box should shift 50px from the top. But it is giving a different result. 

```
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>calculating element dimensions</title>
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <style>
            aside, article, section, header, footer, nav {
                display: block;
            }

            div, p {
                margin: 0;
                padding:0;
            }

            html {
                background: #ccc;
            }

            .outer {
                width: 600px;
                margin: 0 auto;
                background: #9CF;
            }

            .box{
                background: #B7D19C;
                width: 400px;
                padding: 50px;
                border: 2px solid black;
            }

            p {
                background: #EEA458;
                height: 100%;
            }

            /*add styles here*/

            </style>
    </head>
    <body>
        <div class="outer">
            <div class="box">
                <p>Here we'll need to calculate the width of this interior div element. This may seem simple at first, but as we begin to add box model properties, and as the overall width of the parent element and the div conflict with one another, we'll need to understand how each of the properties combine to effect the overall width (and height) of page elements.</p>
            </div>
        </div>
    </body>
</html>

```

Answer: 
> 
> How can I achieve this?
> 
> 
> 

You can't. After all, the user is welcome to change their device's locale at any point in time.
You can't prevent the user from installing your app, but you can check the device language in your first activity, and finish it if required.