Испытание: статистика браузеров [19/31]

Курсы
1 
<!DOCTYPE html>
<html>
    <head>
       <title>Испытание: статистика браузеров</title>
       <meta charset="utf-8">
    </head>
    <body>
        <main>
            <section>
                <h1>Статистика браузеров (06.2014)</h1>
                <div class="pie-container">
                    <div id="safari" class="pie"></div>
                    <div id="ie" class="pie"></div>
                    <div id="firefox" class="pie"></div>
                    <div id="chrome" class="pie"></div>
                </div>
                <div class="stats">
                    <ul>
                        <li data-name="Chrome">Chrome</li>
                        <li data-name="Firefox">Firefox</li>
                        <li data-name="Internet Explorer">Internet Explorer</li>
                        <li data-name="Safari">Safari</li>
                    </ul>
                </div>
            </section>
        </main>
    </body>
</html>

html, body {
    width: 550px;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: #333;
    background: #f5f5f5;
}

main {
    position: relative;
    display: block;
    width: 500px;
    height: 300px;
    margin: 0 auto;
}

h1 {
    margin: 0;
    margin-bottom: 10px;
    padding: 10px 0;
}

.pie-container {
    position: relative;
    float: left;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.8);
}

.pie-container::after{
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    z-index: 50;
    width: 50%;
    height: 50%;
    color: white;
    background-color: #f5f5f5;
    border-radius: 50%;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.8) inset;
}

.pie {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #AAA;
    clip: rect(0px, 75px, 150px, 0px);
    border-radius: 50%;
}

.pie:first-child {
    z-index: 10;
    background-color: #AAA; /*grey*/
    transform: rotate(-20deg);
}

.pie:nth-child(3) {
    z-index: 20;
    background-color: #0074D9; /*blue*/
    transform: rotate(160deg);
}

.pie:nth-child(2) {
    z-index: 30;
    background-color: #FF851B; /*orange*/
    transform: rotate(20deg);
}

.pie:last-child {
    z-index: 40;
    background-color: #2ECC40; /*green*/
    transform: rotate(100deg);
}

.stats ul {
    float: left;
    margin-left: 50px;
}

.stats ul li {
   list-style: none;
}

div ul li {
    position: relative;
    margin: 10px 0;
}

li::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    left: -25px;
    top: 2px;
    background-color: #AAA;
}

ul li:first-child::before {
    background-color: #2ECC40;
}

ul li:nth-child(2)::before {
    background-color: #FF851B;
}

ul li:nth-child(3)::before {
    background-color: #0074D9;
}

Hе понимаю в чем проблема, почему задание только на 92% ? Спасибо

2

У вас по диаграмме firefox синего цвета получился.

3

здесь не нужен был ul

.stats {
float: left;
margin-left: 50px;
}