my div content wont align left as my css specifies

Question

I am trying to make my content align left within a div... the code is below... I made this work once but lost the code. now I cannot figure it out again.

Html5:

<div class="wrapper materials">
<section id="materials">

Then I make an article tag then I create the article content including h tags, p tags etc. then I close the tags then I close the div

css:

.materials {
    width: 80%;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    text-align: left; 
}

The text in the materials wrapper is staying centered but I want it aligned left.

Answer 1

First of all you are using materials as a class as well as an id so if you are targeting the element holding materials as id, than you need to use #materials and not .materials

#materials {
    width: 80%;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    text-align: left; 
}

Apart from this the only thing possible here is that you might be having some more specific selector which is overriding the block of your CSS, try using

#materials {
   text-align: left;
}

Answer 2

Your class .wrapper has text-align: center. It would be advisable to review and simplify your stylesheet based on case uses. For example, what text do you want centered within elements of class .wrapper? If you specify those cases, then only those elements within the wrapper will be centered.

Alternatively, if you want everything in .wrapper except for .materials to be centered, then specify that as follows:

.wrapper.materials {
    text-align: left;
    width: 80%;
    margin: 0 auto;
}

By combining the two in this way you're telling the browser not to choose one class over the other where they differ, but to treat them as a special, unambiguous case.