Почему мои CSS просочились в другие компоненты React?

Question

Итак, у меня есть два CSS файла, каждый из которых имеет свой собственный соответствующий файл. JS, и я создал css специально для этих компонентов. Однако, даже когда я go до присвоения идентификатора, ширина одного компонента влияет на ширину в другом компоненте, что является сумасшествием, потому что файлы не имеют общих CSS или любых похожих имен классов, но если я изменю ширина для одного файла, все остальные CSS тоже меняется. Может кто-нибудь указать мне правильное направление?

Это мои навыки. css файл

#photo {
  display: flex;
  width: 100px; ---> When I change this it affects my other CSS file
  height: 90px;
  flex-direction: column;
  margin-right: 10px;
  flex-direction: wrap;
  margin-top: 50px;
}

.box { 
  display: flex;
  font-family: roboto;
  border-radius: 18px;
  background: white;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
  height: 190px;
}

Вот мое резюме. css файл:

.title {
  color: black;
}

#card { ---> Affects this I believe.... 
  display: grid;
  grid-template-columns: 650px;
  grid-template-rows: 410px 410px 80px;
  grid-template-areas: "image" "text" "stats";

  font-family: roboto;
  border-radius: 18px;
  background: white;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
  text-align: center;

  transition: 0.5s ease;
  cursor: pointer;
  margin-bottom: 70px;
}

#card-image {
  grid-area: image;
  background: url("../../../Photos/Videos/marketing.jpeg");
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
}

#card-text {
  grid-area: text;
  margin: 25px;
}

#card-text #date {
  color: rgb(255, 7, 110);
  font-size: 13px;
}

#card-text p {
  color: grey;
  font-size: 15px;
  font-weight: 300;
}

#card-text h2 {
  margin-top: 0px;
  font-size: 28px;
}

#card:hover {
  transform: scale(1.2);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6);
}

Это мой файл навыков

class Skills extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <div className="box">
          <div className="skill">
            <img id="photo" src={html} />
            <div>HTML</div>
          </div>
          <div className="skill">
            <img id="photo" src={css} />
            <div>CSS</div>
          </div>
          <div className="skill">
            <img id="photo" src={jquery} />
            <div>Jquery</div>
          </div>
          <div className="skill">
            <img id="photo" src={javascript} />
            <div>Javascript</div>
          </div>
          <div className="skill">
            <img id="photo" src={Reacts} />
            <div>React</div>
          </div>
          <div className="skill">
            <img id="photo" src={python} />
            <div>Python</div>
          </div>
          <div className="skill">
            <img id="photo" src={flask} />
            <div>Flask</div>
          </div>
          <div className="skill">
            <img id="photo" src={mongodb} />
            <div>Mongodb</div>
          </div>
          <div className="skill">
            <img id="photo" src={SQL} />
            <div>PostgreSQL</div>
          </div>
          <div className="skill">
            <img id="photo" src={Github} />
            <div>Github</div>
          </div>
        </div>
      </div>
    );
  }
}

export default Skills;

Это мой файл резюме

class Resume extends Component {
  constructor(props) {
    super(props);

    this.state = { Jobs: ---> data goes here}
}

  render() {
    return (
      <div>
        {this.state.Jobs.map((item) => (
          <div id="card">
            <div id="card-image"></div>
            <div id="card-text">
              <span id="date">{item.date}</span>
              <h2>{item.Job}</h2>
              {item.description.map((items) => (
                <ul>
                  <li>{items}</li>
                </ul>
              ))}
            </div>
          </div>
        ))}
      </div>
    );
  }
}

export default Resume;