bar graphs

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bar Graphs</title>
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1>Bar Graphs</h1>
    </header>
    <div class="wrapper">
        <div class="container">
            <h2>Maui's Dolphin Populaton Decline</h2>
            <p>95.5% of all human-induced mortalities are related to fishing activities.</p>
            <ul class="mortalities">
                <li><em>Set Net</em><span style="width:70%;">70%</span></li>
                <li><em>Trawling</em><span style="width:26%;">26%</span></li>
                <li><em>Mining</em><span style="width:2%;">2%</span></li>
                <li><em>Vessel Traffic</em><span style="width:1%;">1%</span></li>
                <li><em>Other (polution, disease)</em><span style="width:1%;">1%</span></li>
            </ul>
            <h2>Maui's Population Decline</h2>
            <ul class="decline">
                <li>1985<em>140</em><span style="height:93%;"></span></li>
                <li>1998<em>80</em><span style="height:53%;"></span></li>
                <li>2001<em>75</em><span style="height:50%;"></span></li>
                <li>2002<em>69</em><span style="height:46%;"></span></li>
                <li>2004<em>111</em><span style="height:74%;"></span></li>
                <li>2011<em>55</em><span style="height:36%;"></span></li>
            </ul>
        </div>
        <!-- .container-->
    </div>
    <!-- .wrapper-->
    <footer>
        <small><a href="https://opensource.org/licenses/MIT">MIT</a></small>
    </footer>
</body>

</html>

styles.css

body {
    background: #eeeeee;
    font-size: 16px;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    margin: 0;
}

a {
    color: crimson;
    text-decoration: none;
}

a:hover {
    color: red;
}


/* Layout
------------------------------------------*/

header,
.container,
footer {
    margin: 0 auto;
    width: 88%;
    max-width: 1080px;
}

.wrapper {
    padding: 1em 0;
    background: #ffffff;
}


/* Horizontal Bar Graph
------------------------------------------*/

.mortalities {
    list-style: none;
    padding: 0;
    max-width: 400px;
}

.mortalities li {
    height: 30px;
    position: relative;
}

.mortalities li span {
    position: absolute;
    top: 0;
    left: 0;
    background: pink;
    margin-left: 15em;
    text-indent: -32px;
}


/* Vertical Bar Graph
------------------------------------------*/

.decline {
    list-style: none;
    padding: 0;
    display: flex;
    margin-bottom: 3em;
}

.decline li {
    position: relative;
    width: 100px;
    margin-right: .2em;
    height: 8em;
    text-align: center;
}

.decline li em {
    position: absolute;
    left: 0;
    bottom: -2.5em;
    width: 100%;
}

.decline li span {
    position: absolute;
    bottom: -1em;
    left: 0;
    width: 100%;
    background: pink;
}