<ul class="nav">
            <li class="first"><a href="#"><i>The</i> Weblogue</a></li>
            <li><a href="#"><i>Back</i> Issues</a></li>
            <li class="last"><a href="#"><i>About</i> Our Paper</a></li>
        </ul><!-- /end .nav -->
    </div><!-- /end .mast -->

    <div class="section intro">
        <div>
            <h2>&#8220;Give me problems, give me&nbsp;<em>work</em>.&#8221;</h2>

            <p>In the year 1878 I took my degree of Doctor of Medicine of the University of London, and proceeded to Netley to go through the course prescribed for surgeons in the army. Having completed my studies there, I was duly attached to the Fifth Northumberland Fusiliers as Assistant Surgeon. The regiment was stationed in India at the time, and before I could join it, the second Afghan war had broken out. On landing at Bombay, I learned that my corps had advanced through the passes, and was already deep in the enemy&#8217;s&nbsp;country.</p>
        </div>
    </div><!-- /end .section.intro -->

    <div class="section main">
        <h2><b>Victors <abbr class="amp" title="And">&amp;</abbr> Villains</b></h2>
        <ol>
            <li id="f-holmes" class="figure">
                <a href="#">
                    <img src="f-holmes.jpg" alt="" />
                    <span class="figcaption">Sherlock<b> Holmes<b></span>
                </a>
            </li><!-- /end .figure -->
            <li id="f-watson" class="figure">
                <a href="#">
                    <img src="f-watson.jpg"/>
                    <span class="figcaption"><abbr title="Professor">Dr</abbr> John Hemish <b>Watson</b></span>
                </a>
            </li><!-- /end .figure -->
            <li id="f-mycroft" class="figure">
                <a href="#">
                    <img src="f-mycroft.jpg" alt="mycroft" />
                    <span class="figcaption">Mycroft <b>Holmes</b></span>
                </a>
            </li><!-- /end .figure -->
            <li id="f-moriarty" class="figure">
                <a href="#">
                    <img src="f-moriarty.jpg" alt="moriarty" />
                    <span class="figcaption"><abbr title="Professor">Prof</abbr> James <b>Moriarty</b></span>
                </a>
            </li><!-- /end .figure -->
            <li id="f-adler" class="figure">
                <a href="#">
                    <img src="f-adler.jpg" alt="adler" />
                    <span class="figcaption">Irene <b>Adler</b></span>
                </a>
            </li><!-- /end .figure -->
            <li id="f-winter" class="figure">
                <a href="#">
                    <img src="f-winter.jpg" alt="winter" />
                    <span class="figcaption">James <b>Winter</b></span>
                </a>
            </li><!-- /end .figure -->
        </ol>
    </div><!-- /end .section.main -->

    <div class="footer">
        <img src="ornament.png" class="ornament">
        <p>Illustrations by <a href="http://en.wikipedia.org/wiki/Sidney_Paget">Sidney Paget</a>, words by <a href="http://en.wikipedia.org/wiki/Arthur_Conan_Doyle">Sir Arthur<br>
        Conan Doyle</a>.</p>
        <p>What remains is by <a href="http://unstoppablerobotninja.com/">Ethan Marcotte</a>.</p>
    </div><!-- /end .footer -->
</div><!-- /end .inner -->

background-image: url("logo-bg.png");
display:block;
background-repeat: no-repeat;
padding-bottom: 220px;
align-content: center;
margin-top: 0;
margin-bottom: 0;
padding-top: 120px;
padding-left: 70px;

margin-left: 108px;

border:solid red 2px;
 width: 100%;
background-repeat: no-repeat;
background-size: contain;

.footer{
    display: block;
    color:#890101;
    padding: 40px 0 20px;
    font-size: 12px;
    text-align: center;
    margin-left: 400px;
}

}