Image is not staying inside the box

pmwngt 0
Viewed 36

I'm doing a fitness site and I wanted to have a sponsor section.

I saw this code that you see down, and it was fitting my website style. I tried to fix it, but I just started to learn CSS, so I'm not good at it. It's good but the images that I put in the box are sticking out of the box.

How can I change that the images stay inside the gray box?

.sponsors {
  width: 999px;
  display: block;
  clear: both;
  border: 1px solid whitesmoke;
  padding: 50px;
  margin: 15px auto;
  text-transform: uppercase;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  color: #999;
}

.sponsors span {
  display: block;
  float: left;
  height: 20px;
  line-height: 10px;
}

.sponsors a {
  display: block;
  float: left;
  height: 96px;
  width: 11%;
  padding: 0 10px;
}

a.one {
  background: url("http://placekitten.com/200/300") no-repeat 0 0;
}

a.two {
  background: url("http://placekitten.com/200/300") no-repeat 0 0;
}

a.three {
  background: url("http://placekitten.com/200/300") no-repeat 0 0;
}

a.four {
  background: url("http://placekitten.com/200/300") no-repeat 0 0;
}

a.five {
  background: url("http://placekitten.com/200/300") no-repeat 0 0;
}

a.six {
  background: url("http://placekitten.com/200/300") no-repeat 0 0;
}

a.seven {
  background: url("http://placekitten.com/200/300") no-repeat 0 0;
}
    <div class="sponsors">
        <span>Sponsors:</span>

        <a class="one" href=""></a>
        <a class="two" href=""></a>
        <a class="three" href=""></a>
        <a class="four" href=""></a>
        <a class="five" href=""></a>
        <a class="six" href=""></a>
        <a class="seven" href=""></a>
    </div>

Example: Example of Sponsor Section

css html
2 Answers

The problem is at your .sponsor style with

padding: 50px;
margin: 15px auto;

Adjust the padding and margin properly to fit the images inside the div.

N.K Barman0

change

display: block

to

display: inline-block

in your .sponsors class

usergiok10
Related