#content {
    ...
    padding-left: 20%;
    padding-right: 20%;
    width: 100%;
    ...
}

The width will equal to “100%” + “40%” (which is quite large).

To get the width to understand and encompass the padding values, use a “box-sizing” model of “border-box”: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

For example:

#content {
    ...
    box-sizing: border-box;
    padding-left: 20%;
    padding-right: 20%;
    width: 100%;
    ...
}