title: How to override or nullify Container's CSS padding in React apps
body: <p>I need help with CSS in my react-redux app where I'm also using <code>styled-components</code> and <code>react-spring</code> to add animations to my app</p>
  
  <p>I have my the whole container with padding and I need to add images which should go in the background
  like shown in this image
  see those images on the side</p>
  
  <p>but my code has JSX-components/HTML elements like following:</p>
  
  <pre><code>&lt;Container paddingTop={paddingTop}&gt;
          &lt;BGCircleDotRed&gt;
            &lt;img src="/images/bg_triangle_blue.png" alt=""/&gt;
          &lt;/BGCircleDotRed&gt;
  
      &lt;BGSwooPink&gt;
              &lt;img src="/images/bg_swoo_pink.png" alt=""/&gt;
            &lt;/BGSwooPink&gt;
      ... // and other backgroun images components
  &lt;/Container&gt;
  </code></pre>
  
  <p>so now how can I write nullify that container's padding for theses background images and then add them at the specific point as shown in the pic
  the css for each of these image componnet is following:</p>
  
  <pre><code>export const BGCircleDotRed = styled.div`
    position: relative;
    height: auto;
    // padding-right: 9%;
    ${responsiveCSS({
      'width': { sm: 5, md: 10, suffix: '%'}
    })};
    z-index: -1;
    opacity: 0.2;
  `;
  </code></pre>
  
  <ul>
  <li>Please note that <code>responsiveCSS</code> is an helper function created to work when the site loads on devices with various display sizes</li>
  </ul>
  
  <p>so what changes should I made, for reference please look at this image : <a href="https://cdn.discordapp.com/attachments/238727603618447362/514687148197150720/Screen_Shot_2018-11-20_at_4.50.58_PM.png" rel="nofollow noreferrer">https://cdn.discordapp.com/attachments/238727603618447362/514687148197150720/Screen_Shot_2018-11-20_at_4.50.58_PM.png</a></p>