Question

I have been working with HTML and CSS for about 5 years now, and I am at a complete loss with this one. http://napletonlaw.connectionsquad.com/

On that page, there is a single div in that container with an ID of Clarity.

I have the CSS rules as follows:

#clarity {
text-align: center;
width: 320px;
}

The code for it is as follows:

<div id="clarity">
            <img src="Resources/magnifying-glass.png" />
            <p>You have questions, and we have answers.  We can help break down the situation into easy-to-understand terms and clear advice. Napleton Law is here to help you!</p>
        </div>

For some reason the width I apply to that DIV is not taking… In dreamweaver’s preview it shrinks the div to 320px, but when previewed it does not.. I do not know why the clarity div is spanning the entire page when I set a width of 320px…

Answer 1

There is a missing bracket in the preceeding rule that is likely the cause of your issue.

#container {
    width: 960px;
    height: 800px;
    margin: 0px;
    position: relative;
    z-index: 100;
    background-color: #a0a0a0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 1; <--- Missing bracket
    -moz-box-shadow: 0 0 10px rgba(0,0,0,1);
}
#clarity {
    text-align: center;
    width: 320px;
}

<div id="clarity">
            <img src="Resources/magnifying-glass.png" />
            <p>You have questions, and we have answers.  We can help break down the situation into easy-to-understand terms and clear advice. Napleton Law is here to help you!</p>
        </div>

#container {
    width: 960px;
    height: 800px;
    margin: 0px;
    position: relative;
    z-index: 100;
    background-color: #a0a0a0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 1; <--- Missing bracket
    -moz-box-shadow: 0 0 10px rgba(0,0,0,1);
}
#clarity {
    text-align: center;
    width: 320px;
}