how to fix width of child div tag

I have two div tags parent and child. The child tag has a position fixed with a width of 100%. The parent has a padding of 10px as shown in this jsfiddle code. The issue is that when I give a width of 100% to the child tag then its right side moves out of the parent div tag. I know that is because it has padding. One way to solve this is to give the child tag a width of 90%.


But is there a better way than this so that the child tag appears exactly inside the parent tag?


UPDATE


I want to keep position: fixed for child tag
.parent {
height: 300px;
padding: 10px;
border: 1px solid red;
}

.child {
position: fixed;
height: 100px;
width: 100%;
border: 1px solid black;
}