body {
    background: #eeeeee;
}

p {
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
    font-size: 35px;
    font-size: 2vw;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 5px solid #ccc;
    padding: 10px 0;  

    /* 22.5 * 2 = 45 (width of 2 images)*/
    /* 1.25 * 2 = 2.5 (This is for the width between the 2 images) */
    /* Width of p element (AKA Bottom Border) */
    /* 45 + 2.5 = 47.5 */
    width: 47.5%;

    /* "Margin:  auto" centers p element horizontally */
    /* When setting an elements width text align will no longer apply */
    margin: auto;
}

img {
    /* 22.5 * 4 =90 */
    width: 22.5%;
    /* 1.25 * 2 * 4 =10 */
    margin: 1.25%;
    /* 90 + 10 = 100 */

    /* The float css property places an elemnet on the left or right side of its container, allowing text and inline elements to wrap around it. The element is remoced from the normal flow of the page. Also it removes "Mystery/Ghost Space" between elements */
    float: left;
}