Switch this for #title

leafprojectcopy.css

#title {
    font-family: baskerville, serif;
    font-style: italic;
    font-size: 3em;
    text-align: center;
    letter-spacing: .025em;
    line-height: 1.1em;
    /**/
    background: rgba(255,247,229,.8);
    margin-top: 1.5em;
    margin-bottom: 4.5em;
    /**/
    /**
    okay so here, try using a set width and height
    then you can use automatic left and right margins to center it
    and it will be a perfect square, so it will also be a perfect
    circle. And no media queries are actually needed at all.
    you were trying to create the shape with padding and margin
    that is the backward way to do it.

    your code:
    margin-left: 8em;
    margin-right: 8em;
    padding-top: 2.1em;
    padding-bottom: 2.1em;
    **/

    /* my code: */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-top: 2.5em;
    line-height: 1em;
    height: 8em;
    width: 8em;
    border-radius: 50%;
}