The problem is that the lines
.entry-content, .entry-content p, .entry-content span {
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 26px;
}
in your styles.css file are interfering with the MathJax layout. Since MathJax uses spans for its content, this rule is overriding the font-size, font-weight, and (most importantly) the line-height, which is causing the math to be the wrong size and separation.
You might be able to get away with just using
.entry-content, .entry-content p {
color: #666;
font-size: 16px;
font-weight: 400;
line-height: 26px;
}
as the span should inherit the .entry-content values away, unless they are nested inside other containers that have set these values to something else, and this is being used to reset them.
I don't see a good way to apply these only to spans that don't appear inside a mathjax container, and trying to reset it for the mathjax spans will break the inheritance of these properties within the MathJax tree.
Davide