CSS: em value is overriding

Issue

Please, consider the following CSS code:

body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: normal;
} 

.main-headline {
font-family: 'Open Sans', sans-serif;
font-size: 3.1875em;
font-weight: 700;
text-align: center;
margin-bottom: 0em;
margin-top: 5em;
}

.h1-sub {
font-family: 'Open Sans', sans-serif;
font-size: 1.3125em;
font-weight: 400;
text-align: center;
margin-top: 0.3125em;

.container_12 .grid_12 {
width:58.75em;
}

And HTML:

<header class="container_12 grid_12 alpha omega">
    <div class="grid_12 alpha omega">
        <hgroup>
                <h1 class="main-headline">Some text</h1>

            <p class="h1-sub grid_12 alpha omega">Some text</p>
        </hgroup>
    </div>
</header>

The problem is: .h1-sub class takes weird width. There is a body font-size 16px and container: 58.75em which should be equal 940px. But instead it I receive 1234px in width. I've made a conclusion that my width calculates from .h1-sub font-size which is 1.3125em or 21px.

Does 1em value can be inherit not only from body font-size? Notice that nothing happened to .main-headline class where is font-size has been overridden also.

Solution

This line of CSS:

.container_12 .grid_12 { width:58.75em; }

Is trying to select anything with a class of .grid_12 inside .container_12. That is therefore trying to give the width to the p tag. If that's not what you're trying to do, you need to just declare:

.container_12 { width:58.75em; }

Also you forgot to close the .h1_sub styles with a } at the end:

.h1-sub {
font-family: 'Open Sans', sans-serif;
font-size: 1.3125em;
font-weight: 400;
text-align: center;
margin-top: 0.3125em; }

Here is a working fiddle: http://jsfiddle.net/B893S/

Answered By - CaribouCode