18-18 100% - по минимальному. Прошу оценить правильность моего кода!!!

Курсы §16. Наследование и каскадирование
1

Как–то так получилось, что результат 100%. Один !Important !!!
Может я что-то не так сделал?

/* Общее оформление */
html,
body {
margin: 0;
padding: 0;}

body {
width: 550px;
font-size: 14px;
font-family: “Tahoma”, “Arial”, sans-serif;
color: black;}

.gallery { display: flex;
flex-wrap: wrap;
width: 300px;
padding: 10px;}

.picture { width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid burlywood;
text-align: center;
background-repeat: no-repeat;
background-position: 50% 80%;
background-size: 64px 64px;
border-radius: 10px;}

/* Оформление картинок */
.picture.cat-foodlove {
background-image: url(“cat-foodlove.svg”);
background-color: white;}

#scary.cat-slippers {
background-image: url(“cat-slippers.svg”);}

.picture.cat-fat {
background-image: url(“cat-fat.svg”);
width: 100px;
height: 100px;}

.picture.cat-cage {
background-image: url(“cat-cage.svg”);
border-color: burlywood;
color: black !Important; }

2

Ну-у… Можно и так…
У меня !Important присутствует в двух местах.
100% вышло следующим образом…

html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
font-size: 14px;
font-family: “Tahoma”, “Arial”, sans-serif;
color: black;
}

.gallery {
display: flex;
flex-wrap: wrap;

width: 300px;
padding: 10px;
}

.picture {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid burlywood;

text-align: center;

background-repeat: no-repeat;
background-position: 50% 80%;
background-size: 64px 64px;
background-color: white;

border-radius: 10px;
}

/* Оформление картинок */
.picture.cat-foodlove {
background-image: url(“cat-foodlove.svg”);
background-color: white;
}

.picture.cat-slippers {
background-image: url(“cat-slippers.svg”)!Important;
}

.picture.cat-cage {
background-image: url(“cat-cage.svg”);
border-color: burlywood;
color: black !Important;
}

.picture.cat-fat {
background-image: url(“cat-fat.svg”);
width: 100px;
height: 100px;
}

3

.gallery .picture {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid burlywood;

text-align: center;

background-repeat: no-repeat;
background-position: 50% 80%;
background-size: 64px 64px;
background-color: white;

border-radius: 10px;
}

Так не обязательно задавать значения рамки отдельным картинкам