Moving images in seperate css class moves other images

July 18, 2022

I’m currently working on a react project and am having an issue where when I am trying to add padding to some images at the bottom of my page in a a separate css class it’s moving the main image at the top of my page.

First image


        <div className="self--image">
            <img src={Me} alt="Me"/>
        </div>

New Images



        <div className="bottom--cont">
            <a href="https://github.com/mm2023git">
                <img src={github} alt="Github"/>
            </a>
            <a href="https://www.instagram.com/mokelmoo/">
                <img src={insta} alt = "Instagram"/>
            </a>
        </div>

css

.self--image > img{
  width: 317px;
}

.bottom--cont{
  background-color: #161619;
  position: relative;
  top: -47px;
}

.bottom--cont > a, img{
  width: 25px;
  display: inline-block;
  position: relative;
  padding-left: 20px;
}

How can I adjust this so when I add padding or positioning to the other images it doesn’t affect my main image?

>Solution :

Basically the error was in .bottom--cont > a, img , here you are saying to add style to .bottom--cont class and then add style to all img tag,
you need to separate the selectors like this

.bottom--cont > img, .bottom--cont > a

.self--image > img {
  width: 317px;
}

.bottom--cont {
  background-color: #161619;
  position: relative;
  top: -47px;
}

.bottom--cont > img, .bottom--cont > a {
  width: 25px;
  display: inline-block;
  position: relative;
  padding-left: 60px;
}

<div class="self--image">
  <img src="https://picsum.photos/id/3/400/400" alt="Me" />
</div>


<div class="bottom--cont">
  <a href="https://github.com/mm2023git">
    <img src="https://picsum.photos/id/1/50/50" alt="Github" />
  </a>
  <a href="https://www.instagram.com/mokelmoo/">
    <img src="https://picsum.photos/id/1/50/50" alt="Instagram" />
  </a>
</div>