Untitled

<head>
<style>
html,body{
    width:100%;
    margin:0;
    padding:0;
    font-family: "Arial";
}
.MainHeader{
    background-color:#BFBFBF;
    padding: 20px;
    overflow: hidden;
}
.MainHeaderTitle{
    display: inline-block;
    line-height: 64px;
    margin:0;
    vertical-align: top;
    color:#404040;
}
.MainHeaderLogo {
    display: inline-block;
    height: 64px;
    width: 64px;
    }
nav{

    overflow: hidden;
}
nav ul{
    margin:0;
    padding: 0;
    display: inline-block;
    overflow: hidden;
}
nav ul li{
    list-style-type:none;
    background-color: #404040;
    float: left;
    width: 140px;
    line-height: 40px;
    text-align: center;
    margin: 2px;
}
nav ul li a{
    color: #BFBFBF;
    text-decoration: none;

}
section ul li a{
    color: #404040;
    text-decoration: none;
}

img{
    max-width: 100%;
}
.img-container{
    text-align: center;
}
main{
    width:100%;
    padding: 20px;
    box-sizing: border-box;
}
footer{
    background-color:#404040;
    color: #BFBFBF;
     overflow: hidden;
    padding: 20px;
}
footer a,footer p{
     color: #BFBFBF;
     margin: 5px;
     display: inline-block;

}
.col-3{
    width:25%;
    float:left;

}
</style>
</head>
<body>
<header class="MainHeader">
    <div class="HeaderWrap">
        <img src="http://charactercounts.north-staracademy.com/images/Climbing_to_Character-Logo.png" alt="Climbing to Character Logo" class="MainHeaderLogo">
        <h1 class="MainHeaderTitle">
            Climbing to Character
        </h1>
        <nav>
            <ul class="NavList">
                <li class="NavListItems1">
                    <a href="index.html" class="NavLinks1">Home</a>
                </li>
                <li class="NavListItems">
                    <a href="trustworthiness.html" class="NavLinks">Trustworthiness</a>
                </li>
                <li class="NavListItems">
                    <a href="respect.html" class="NavLinks">Respect</a>
                </li>
                <li class="NavListItems">
                    <a href="responsibility.html" class="NavLinks">Responsibility</a>
                </li>
                <li class="NavListItems">
                    <a href="fairness.html" class="NavLinks">Fairness</a>
                </li>
                <li class="NavListItems">
                    <a href="caring.html" class="NavLinks">Caring</a>
                </li>
                <li class="NavListItems">
                    <a href="citizenship.html" class="NavLinks">Citizenship</a>
                </li>
            </ul>
        </nav>
    </div>
</header>
<main>
    <section class="ContentSection">
        <header class="ContentSectionHeader">
            <h1 class="ContentSectionTitle">
                Home
            </h1>
        </header>
        <p class="ContentSectionInformation">
            Teaching good character is one of the things that has made North Star Academy what it is today. We use a program called Character Counts to teach students how to have good character. The Character Counts program is made up of six basic pillars of character. These pillars of character will help everyone to succeed.
            <br />
            <br />
            They are:
        </p>
        <ul class="ContentSectionList">
            <li class="ContentSectionListItems">
                <a href="trustworthiness.html" class="ContentSectionListLinks">Trustworthiness</a>
            </li>
            <li class="ContentSectionListItems">
                <a href="respect.html" class="ContentSectionListLinks">Respect</a>
            </li>
            <li class="ContentSectionListItems">
                <a href="responsibility.html" class="ContentSectionListLinks">Responsibility</a>
            </li>
            <li class="ContentSectionListItems">
                <a href="fairness.html" class="ContentSectionListLinks">Fairness</a>
            </li>
            <li class="ContentSectionListItems">
                <a href="caring.html" class="ContentSectionListLinks">Caring</a>
            </li>
            <li class="ContentSectionListItems">
                <a href="citizenship.html" class="ContentSectionListLinks">Citizenship</a>
            </li>
        </ul>
        <div class="img-container">
            <img class="main-img" src="http://charactercounts.north-staracademy.com/images/Climbing_to_Character-Six_Pillars.png" class="ContentSectionImages" alt="The six pillars of character are trustworthiness, respect, responsibility, fairness, caring, and citizenship." />
        </div>

    </section>
</main>
<footer>
    <div class="FooterWrap">
        <div class="col-3">
            <p class="FooterInformation">
            Made by students at North Star Academy
        </p>
        </div>
        <div class="col-3">
            <p class="FooterInformation">
            Last Updated on <time datetime="2014-10-27">10/27/2014</time>
            </p>
        </div>
        <div class="col-3">
            <a href="http://north-staracademy.com/index.html" class="FooterNorthStarLink">North Star Academy</a>
        </div>
        <div class="col-3">
            <a href="http://charactercounts.org/sixpillars.html" class="FooterSixPillarsLink">Six Pillars of Character Official Website</a>
        </div>


    </div>
</footer>
</body>