.primary-header {
    display: flex;
    justify-content: space-between;
}

.login-form {
}

.login-form input[type=text],
.login-form input[type=password]
{
    padding: 10px;
}
.login-form input[type=submit] {
    padding: 12px;
    background-color: #FFB100;
    border: none;
    border-left: 10px solid #fff;
    color: #443A94;
}





* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}
body {
    background-color: #555;

}

h1,h2,h3,h4,h5,h6 {
    /* remove top margin from headings */
    margin-top: 0;
}

.main-wrapper {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
}

/* use flexbox to layout the different sections
    - intro and signup on one row,
    - features, latest members, footer, nav full width
    */
    main {
        display: flex;
        flex-wrap: wrap;
    }
    /* These components shjould be max width */
    .features,
    .latest,
    .top-navigation,
    footer {
        width: 100%;
    }


    .top-navigation {
        background-color: #fff;
    }
    .top-navigation ul {
        /* display the content using flexbox, put the menu on the end */
        display: flex;
        justify-content: flex-end;

        /* remove default margin and padding from the list */
        margin: 0;
        padding: 0;

        /* remove the default bullet points */
        list-style: none;
    }
    .top-navigation a {
        /* change to display block, rather than inline */
        display: block;
        /* add some padding around each link */
        padding: 1em;

        text-decoration: none;
    }

    .primary-header {
        background-color: #443A94;
        color: #fff;

        /* add some padding */
        padding: 1em;

        /* make the header a bit bigger */
        height: 150px;

        /* use flexbox to align the header in the center */
        display: flex;
        align-items: center;
    }


    .intro {
        background-color: #fff;
        padding: 1em;

        flex: 1 0 auto;
    }

    .signup-form {
        background-color: #eee;
        min-width: 300px;
        padding: 1em;
    }
    .signup-form input {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
    }
    .signup-form .button {
        display: block;
        padding: 10px;
        background-color: #443A94;
        border-left: 10px solid #FFB100;
        color: #fff;
    }



    .features {
        background-color: #eee;

        /* add some padding */
        padding: 1em;

        /* use flexbox to layout the features on a row */
        display: flex;
        justify-content: space-between;
    }

    .latest {
        background-color: #FFB100;
        padding: 1em;
    }

    .latest ul {
        margin: 0;
        padding: 0;

        list-style: none;

        display: flex;
        flex-wrap: wrap;
    }
    .latest img {
        margin: 1em;
        max-width: 150px;
    }

    footer {
        background-color: #443A94;
        color: #fff;
        padding: 1em;
    }

    footer dl {
        margin: 0;

        display: flex;
        justify-content: space-between;
    }
    footer dt {
        color: #FFB100;
    }
    footer a {
        color: #fff;
        text-decoration: none;
    }