/* before you go ahead and pick background colors, come up with a palette */

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden; /* cuts off text that goes beyond the boundary. shouldn't be an issue with short words */
    background-color: brown;
}

li {
    float: left; /* the image (or element) "floats" or sits on the left side of the container */
}

li a {
    display: block; /* don't worry too much about this for now. for this we want block. */
    color: rgb(228, 219, 208);
    text-align: center;
    padding: 16px; /* padding is for inside the element, margin is for outside. try with 16 and see how it looks */
    text-decoration: none; /* keeps hyperlinks from being underlined */
}

li a:hover {
    background-color:rgb(207, 137, 137);
}

p {
    display: block;
}