FlexBox Test 01

HTML

<div class='menu-container'>
    <div class='menu'>
        <div class='date'>Aug 14, 2016</div>
        <div class="links">
            <div class='signup'>Sign Up</div>
            <div class='login'>Login</div>
        </div>
    </div>
</div>

<div class='header-container'>
    <div class='header'>
        <div class='subscribe'>Subscribe &#9662;</div>
        <div class='logo'><img src='images/awesome-logo.svg' /></div>
        <div class='social'><img src='images/social-icons.svg' /></div>
    </div>
</div>

<div class='photo-grid-container'>
    <div class='photo-grid'>
        <div class='photo-grid-item first-item'>
            <img src='images/one.svg' />
        </div>
        <div class='photo-grid-item'>
            <img src='images/two.svg' />
        </div>
        <div class='photo-grid-item'>
            <img src='images/three.svg' />
        </div>
        <div class='photo-grid-item'>
            <img src='images/four.svg' />
        </div>
        <div class='photo-grid-item last-item'>
            <img src='images/five.svg' />
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.menu-container {
    display: flex;
    color: #fff;
    background-color: #5995DA;
    /* Blue */
    padding: 20px 0;
    justify-content: center;
}

.menu {
    display: flex;
    border: 1px solid #fff;
    /* For debugging */
    width: 900px;
    display: flex;
    justify-content: space-between;
}

.links {
    display: flex;
    justify-content: flex-end;
}

.login {
    margin-left: 20px;
}

.header-container {
    color: #5995DA;
    background-color: #D6E9FE;
    display: flex;
    justify-content: center;
}

.header {
    width: 900px;
    height: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.photo-grid-container {
    display: flex;
    justify-content: center;
}

.photo-grid {
    width: 900px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.photo-grid-item {
    border: 1px solid #fff;
    width: 300px;
    height: 300px;
    background-color: #eee;
}