Estou com dúvida no curso de Web Design Responsivo, no exercício do capítulo Media Queries.

Olá as minhas colunas não ficam alinhadas na forma como eu define em minhas media queries, segue meu css:

estilo.css

/* reset */
*,
*:after,
*:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 1em;
}

body {
    font-family: Arial, helvetica, sans-serif;
    line-height: 1.4;
}

header {
    background: #f0f0f0;
    width: 100%;
}
.logo img {
    display: block;
}

/* busca */
.busca {
    overflow: hidden; /* clearfix */
}
    .busca input {
        border: 1px solid #CCC;
        border-bottom-color: #aaa;
        border-right-width: 0;
        border-radius: 5px 0 0 5px;
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
        color: #555;

        height: 1.7em;
        padding: 0 0.16em;

        float: left;
        -webkit-appearance: none;
    }
    .busca button {
        background: #f0f0f0;
        background: linear-gradient(white, white 50%, #eee);

        border: 1px solid #CCC;
        border-bottom-color: #aaa;
        border-radius: 0 5px 5px 0;
        color: #777;
        font-size: 90%;

        line-height: 1.667em;
        height: 1.888888889em;
        padding: 0 0.5em;
        text-align: center;
        text-transform: lowercase;

        float: left;
    }
        .busca button:hover {
            color: #0669de;
        }

/* categorias */
.noticias {
    color: #ca0000;
}
.esportes {
    color: #3ea909;
}
.famosos {
    color: #ff7f00;
}

.menu-principal {
    font-weight: bold;
    list-style-type: none;
    }
    .menu-principal a {
        display: block;
        padding-right: 1em;
        margin-right: 1em;

        line-height: 1;
        text-decoration: none;
        text-transform: lowercase;
    }
        .menu-principal a:hover {
            opacity: 0.8;
        }


/* lista de notícias */
.chamada {
    border-bottom: 1px dotted #ccc;
    display: block;
    margin-bottom: 1em;
    padding-bottom: 1em;

    text-decoration: none;
    width: 100%;
    overflow: hidden;
}
    .chamada:last-child {
        border-bottom: 0;
    }

    .chamada img {
        border-radius: 5px;
        display: block;
        float: left;
        margin-right: 0.8em;
    }
        .chamada.mini img {
            margin-bottom: 0.4em;
        }
    .chamada:hover h2 {
        text-decoration: underline;
    }

    .chamada.principal h2 {
        font-size: 1.8em;
        line-height: 1.05;
    }
    .chamada.normal h2 {
        font-size: 1em;
    }
    .chamada.secundaria h2 {
        font-size: 0.6em;
    }
    .chamada.mini {
        padding-right: 0.35em;
    }
        :not(.mini) .chamada.mini + .mini {
            padding-left: 0.35em;
            padding-right: 0;
        }


/* direita da TV */
.chamada.tv {
    border: 1px solid #ccc;
    border-radius: 5px;
}
    .tv img {
        border-radius: 3px 3px 0 0;
        margin-top: -1px;
    }
    .tv p {
        clear: both;
        color: #999;
        padding: 1.4em 1em 0.25em;
    }
    .tv h2 {
        padding: 0 1em;
        margin: 0;
        border: 0;
    }
    .tv .bolinha {
        display: inline-block;
        border-radius: 50%;
        background: #aaa;
        height: 7px;
        width: 7px;
        margin-top: 1.4em;
    }
        .tv .bolinha:first-of-type {
            background: #555;
            margin-left: 1.5em;
        }

exercicio.css

.secao {
    width: 100%;
}

.mini {
    float: left;
    width: 50%;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.logo, secao {
    padding: 0 1%;
}

img {
    max-width: 100%;
}

.logo,
.busca,
.barra-nav,
.menu-principal {
    display: inline-block;
    vertical-align: middle;
}

.menu-principal li {
    float: left;
}

header {
    padding: 0.5em 0;
}

.destaques {
    margin-top: 1em;
}

.barra-nav {
    margin: 0.4em 0;
}

@media (min-width: 600px) {
    html {
        font-size: 1.125em;
    }

    .secao {
        width: 50%;
    }
}

@media (min-width: 1000px) {
    html {
        font-size: 1.25em;
    }

    .secao {
        width: 33.333%;
    }
}

index.html

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Notícias.com</title>

    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/exercicios.css">
</head>
<body>

    <header>
        <div class="container">

            <h1 class="logo">
                <img src="img/logo.png" alt="Notícias.com">
            </h1>

            <nav class="barra-nav">
                <ul class="menu-principal">
                    <li><a href="noticias.html" class="noticias">Notícias</a>
                    <li><a href="esportes.html" class="esportes">Esportes</a>
                    <li><a href="famosos.html" class="famosos">Famosos</a>
                </ul>

                <form class="busca">
                    <input type="search" id="campo-busca">
                    <button type="submit">Buscar</button>
                </form>
            </nav>
        </div>
    </header>

    <main class="destaques container">

        <div class="secao">

            <a href="noticia1.html" class="chamada noticias principal">
                <h2>Descoberto mais um esquema de espionagem da NSA</h2>
            </a>
            <a href="noticia2.html" class="chamada noticias normal">
                <h2>Deputado é pego em vídeo pedindo propina</h2>
            </a>
            <a href="noticia3.html" class="chamada noticias normal">
                <h2>Acidente na BR-42 mata 12 da mesma família</h2>
            </a>
            <a href="noticia4.html" class="chamada noticias normal mini">
                <h2>NASA acha indícios de vida em Marte</h2>
            </a>
            <a href="noticia5.html" class="chamada noticias normal mini">
                <h2>Recorde de vendas do Xbox One</h2>
            </a>
            <!--<a href="noticia14.html" class="chamada noticias normal">
                <h2>BC anuncia nova alta nos juros</h2>
            </a>-->
            <a href="noticia11.html" class="chamada famosos normal">
                <img src="img/entretenimento1.jpg" alt="Atriz na praia">
                <h2>Atriz da Globo passeia com filho em Copacabana</h2>
            </a>
            <a href="noticia6.html" class="chamada esportes normal">
                <h2>Estádios das Olimpíadas estão atrasados</h2>
            </a>
        </div>

        <div class="secao">
            <a href="noticia7.html" class="chamada esportes normal mini">
                <img src="img/esporte1.jpg" alt="Time perdedor">
                <h2>Time perdedor é rebaixado para Série B</h2>
            </a>
            <a href="noticia8.html" class="chamada esportes normal mini">
                <img src="img/esporte2.jpg" alt="Time vencedor">
                <h2>Time vencedor sobe para Série A da Copa</h2>
            </a>
            <a href="noticia9.html" class="chamada esportes normal">
                <h2>Transferência milionária de craque para a Europa</h2>
            </a>
            <a href="noticia10.html" class="chamada famosos normal">
                <h2>BBB: brothers vão pra piscina</h2>
            </a>
            <a href="noticia12.html" class="chamada famosos normal">
                <h2>Subcelebridade faz algo estúpido para aparecer</h2>
            </a>
            <a href="noticia16.html" class="chamada famosos">
                <h2>Casal de famosos se separa</h2>
            </a>
            <a href="noticia13.html" class="chamada famosos normal">
                <h2>Novela tem cena decisiva nessa sexta-feira</h2>
            </a>
            <a href="noticia15.html" class="chamada esportes">
                <h2>Jogador é flagrado em festança promíscua</h2>
            </a>

        </div>

        <div class="secao">
            <a href="video.html" class="tv chamada normal famosos">
                <img src="img/tv1.jpg" alt="Roupão">

                <p>BBB</p>
                <h2>Jeílson usa roupão de bolinhas verdes e é consolado</h2>

                <span class="bolinha"></span>
                <span class="bolinha"></span>
                <span class="bolinha"></span>
            </a>
        </div>

    </main>

    <script src="js/menu.js"></script>
</body>
</html>