[Demo](http://jsfiddle.net/vajrzfn0/11/)

I have a container, I want to place subjects on that. Problem is string `maths` is not taking 100% width of its parent.

I suspect it is because of padding on the parent. I want to achieve the same design but `Maths` string should be centered and takes full width[including padding] of parent

```
  .clsSubjectCircle {
border: 1px solid;
border-radius: 50%;
margin: 0 auto;
padding: 30px;
position: relative;
top: 22%;
max-width: 22%;
overflow: hidden;
}

```

And tell me what are all the bad practices in my design.

[Demo2](http://jsfiddle.net/vajrzfn0/13/) explains the problem. I can understand that padding causes the problem

Changing `max-width` to `width` and adding `height` solves the problem, But it affects centering feature of child divs