title: Elements overlapping other in react
body: <p>In my react project, my footer is overlapping my elements near the bottom of the page. </p>
  
  <p>see live project here: <a href="https://surpay-app.herokuapp.com/#/?_k=wo17rb" rel="nofollow noreferrer">https://surpay-app.herokuapp.com/#/?_k=wo17rb</a></p>
  
  <p>I have looked at many other questions about this topic as this is a common issue, but I think mine has to do with different react components acting strangely with one another. </p>
  
  <p>I've tried to play with the margins, of the body, as well as the content. I've played with overflow as well as different display styles for the footer. None of this fix the issue. I'd like the footer to stick to the bottom (so i have a position: fixed) but I dont want it overlapping my content. Adding bottom margin to body doesnt help either. </p>
  
  <p>It seems like this shouldn't be an issue anyway, given that the footer is a component that is rendered after the rest of the content. Here is the JSX:</p>
  
  <pre><code>render() {
          return (
            &lt;div&gt;
              &lt;Navigation /&gt;
              {this.props.children}
              &lt;Footer /&gt;
            &lt;/div&gt;
          );
  }
  </code></pre>