title: Framer-motion overriding react-bootstrap
body: <p>I'm building a website that is using gatsby/react/react-bootstrap/framer-motion. I'm having an issue of framer-motion override my react-bootstrap css? I'd rather not re-style all the responsiveness back into these elements and am wondering if there is a way to get these two libraries to play nice with eachother?? It seems like a headache trying to get framer-motion to be responsive...I might just design for different viewports but idk.</p>
  <p>heres my code:</p>
  <pre><code>import React from &quot;react&quot;;
  import 'bootstrap/dist/css/bootstrap.min.css';
  import './styles.scss';
  import { Image, Container, Row } from 'react-bootstrap';
  import CamcoNavbar from '../components/camconavbar.js';
  import BackgroundImage from '../../static/Untitled-1.jpg';
  import CClogo from '../../static/CamCo(white).png'
  import { motion } from 'framer-motion';
  
  const Home = () =&gt; {
    return (
      &lt;div&gt;
        &lt;CamcoNavbar /&gt;
  
        &lt;Container&gt;
          &lt;motion.img className=&quot;cclogo&quot; key={CClogo} src={CClogo} initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3}}/&gt;
        &lt;/Container&gt;
  
        
        &lt;motion.img className=&quot;header-image&quot; key={BackgroundImage} src={BackgroundImage} initial={{x: -250}} animate={{x: 1000}} transition={{duration: 60, repeat: Infinity}}/&gt;
  
  
  
      &lt;/div&gt;
    )
  }
  
  export default Home
  </code></pre>
  <p>Heres my css:</p>
  <pre><code>
  @import &quot;~bootstrap/scss/bootstrap&quot;;
  
  body {
    background-color: black;
  }
  
  .nav-item {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .nav-item a {
    text-decoration: none;
    letter-spacing: 5px;
    font-weight: 300;
    font-size: 12px;
    color: white;
  }
  
  .nav-item a:hover {
    text-decoration: none;
    color: #64a0c2;
  }
  
  .carousel-item {
    background-color: blue;
    width: 400px;
    height: 400px;
  }
  
  button.navbar-toggler {
    justify-content: center;
  }
  
  .header-image {
    object-fit: cover;
    display: inline-block;
    min-width: 100%;
    min-height: 100%;
    width: 120%;
    height: 120%;
    position: fixed;
    top: 0;
    z-index: -4;
  }
  
  .cclogo {
    position: relative;
    top: 50%;
    left: 50%;
  z-index: 2;
  
  }
  
  p, h1, h2, h3, h4, li {
    color: white;
  }
  
  </code></pre>
  <p>Any help is super appreciated!!!!</p>