Why is my background not fully covering my span?

HTML-CSS
1

Why is my background not covering the whole span element?
You can inspect the element here Gem Hunt.

image
image1139×327 40.6 KB

The span that covers the picture and text and the background are red and black gradients. The span has a class of tablinks.

Circled thing is the background and its supposed to be covering the whole thing but its not.

image

2

What background and span are you talking about?

3

The span that covers the picture and text and the background are red and black gradients. The span has a class of tablinks.

4

Because of your left and right margin you specified for the itemr class. That class is also on the span elements with class="tablinks".

5

??? I dont get what the problem is

6

You have specified right margin of 10px and left margin of 5 px on the span elements. You have defined this margin with the itemr class. Set the left and right margin to 0 for that class and there will be no space between the span elements.

7

I want the background to cover the image and the text compelty not for them to be glued together. and my bug is that its not covering it comeltly. Like the red bg should have a height so its covering the whole span

8

I would really suggest making #stats1 a flexbox container. It is much better and would even allow the children to be normal block-level elements.

#stats1 {
  display: flex;
  margin: 10px;
  border: solid 1px grey;
  padding: 5px;
}

But you can also set .itemr to be display: inline-block