Question: I try to add width:100% to div tag which is inside bootstrap grid system (col-lg-3). But div takes the whole browser width. It doesn't take 100% width of parent(col-lg-3).

```css
.sidebar {

    color: #fff;
    font-weight: bold;
    font-size: 18px;
     background-color: green; 
}

.wrapping {
    width: 100%;
    padding-left: 32px;
    position: fixed;
    background-color: red;
}
```

```html
<div class="row">
        <div class="sidebar col-lg-3">
            <div class="wrapping">
                <a href="javascript:void(0)" class="close_menu">Close Menu</a>
                <div>
                    <h3>Company</br>Name</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Showcase</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Designers</a></li>
                        <li><a href="#">Packages</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main col-lg-9"></div>
        </div>
```

Answer: 
Are you trying to set 100% width to your .wrapping div?
This will take the width of browser window, becouse its position fixed.
try adding this to the .sidebar:

```
position: relative;

```

this will make the wrapping to take the width of the sidebar.

Edit: Try using position sticky instead of position fixed. This way the wrapping will respect the width of its parent. I created a fiddle for that: [jsfiddle.net/Lj8dqnwe](https://jsfiddle.net/Lj8dqnwe)
you can set the width to auto
So it takes the width of the parent tag

```
.wrapping {
    width: auto;
    padding-left: 32px;
    position: fixed;
    background-color: red;
}

```