I am using inline CSS to place model at right bottom of the screen but it is not working perfectly

```
<div className="modal fade " style={{ width:'30%',position:'fixed',bottom:0,right:0,margin:0}} id="updateCategory" tabIndex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true" >

```

it gives me following output
[![output](https://i.stack.imgur.com/MVKcy.png)](https://i.stack.imgur.com/MVKcy.png)

even if remove all css properties above except `width:'30%'` result is same.

but if I use following style it works

```
<div className="modal fade " style={{ width:'30%',bottom: 0,marginTop:260,marginLeft:900}} id="updateCategory" tabIndex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true" >

```

[![output 2](https://i.stack.imgur.com/uiKoz.png)](https://i.stack.imgur.com/uiKoz.png)

but I want to use bottom 0 and right 0 . how will these work. please help