Looks like you need to add a …
.site-logo .custom-logo {
width: 100%;
}
… to prevent the logo expanding over the edge of smaller screens.
There are a few CSS items that manage the space around the logo …
.site-header > .site-logo {
padding-bottom: 45px;
}
.site-logo {
margin-top: 15px;
}
.site-header {
padding-top: 22.5px;
}
@media only screen and (min-width: 482px) {
style.css:3846.site-header {
padding-top: 40px;
}
}
@media only screen and (min-width: 822px) {
.site-header {
padding-top: 72px;
}
}
As for centring the footer logo …
.site-footer > .site-info .site-name {
width: 100%;
}
.site-footer > .site-info .site-logo .custom-logo {
display: block;
}
… should do the trick.