title: Inline math overlapping with text in MathJax in HTML webpage
body: <p>The inline math <em>sometimes</em> overlaps with the text that follows. I think I've been able to pinpoint the exact source of the issue, which is a line in the stylesheet, but I don't understand what's going on and how I should fix it.</p>
  <p>Here is my <code>style.css</code> (this is enough to reproduce the issue):</p>
  <pre><code>section.post *, section &gt; p * {
      max-width: 100%; }
  </code></pre>
  <p>Here's my HTML page:</p>
  <pre><code>&lt;html&gt;
     &lt;link href='../stylesheets/style.css' rel='stylesheet' type='text/css' /&gt;
    &lt;script type=&quot;text/x-mathjax-config&quot;&gt;
      MathJax.Hub.Config({
      TeX: { equationNumbers: { autoNumber: &quot;AMS&quot; } },
      inlineMath: [['$','$'], ['\\(','\\)']],
      processEscapes: true
      });
    &lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; async src=&quot;https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&quot;&gt;&lt;/script&gt;
  &lt;!-- for mathjax support --&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id='container'&gt;
        &lt;div class=&quot;content&quot;&gt;
            &lt;section class='post'&gt;    
      &lt;p&gt;If \(T=100\) then compute \(1/{\sqrt{T}}\) again.&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Here's what the output looks like:</p>
  <p><a href="https://i.stack.imgur.com/FfoWx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FfoWx.png" alt="enter image description here" /></a></p>
  <p>Any help will be much appreciated!</p>