why is Image size reset for me when i add a < a > tag

Question

I have a simple image that has a size attribute added using CSS. I decided to make the image clickable by adding a <a> tag hoping nothing will change. But the whole image has been reset and i cant change the size without removing the <a> tag.

HTML

<a href="#"><header><img src="images/logo.png" alt=""></header></a>

CSS

header img {
    width: 100%;
    height: 50%;
}

Additionally, another React project is having the same issue:

// the css for "catImg"
const useStyles = makeStyles(theme => ({
    catImg: {
        "&:hover": {
            boxShadow: "10px 5px 5px black;",
            backgroundColor: "blue",
        }
    }
}))
.
.
.
<ImageListItem className={classes.catImg}>
                  {/* <a> */}
                   <img
                   src={url}
                   key={cat.token_id} />
                  {/* </a> */}
</ImageListItem>

EDIT:

Putting the a tag outside the ImageListItem makes it work correctly.

// the css for "catImg"
const useStyles = makeStyles(theme => ({
    catImg: {
        "&:hover": {
            boxShadow: "10px 5px 5px black;",
            backgroundColor: "blue",
        }
    }
}))
.
.
.
<a href="something">
<ImageListItem className={classes.catImg}>
                   <img
                   src={url}
                   key={cat.token_id} />
</ImageListItem>
<a/>

Answer 1

The quick response is because yow styles said that them images inside yow header are going to have this styles

header img {
  width: 100%;
  height: 50%;
}

The problem is in your html. Html has rules AND one of them rules is that block tags should not be in side of inline tags header tag is a block tag a is inline

If you want to override that rule in your css you need to specify that a tags are block tags as well with

a {
  display: block;
}

Answer 2

You have to reference the a tag instead of the img

header a {
  width: 100%;
  height: 50%;
  padding: 0;
  margin: 0;
}
header a img {
  width: 100%;
  height: 100%;
}