CODEWITHSUNDEEP
htmlcss
Snuggle
Snuggle

Reputation: 13

Border with extra space on the left and right of it, how can I fix it?

I have div around some images, I want to have a border around it, but the border is expanded way over the images on the left and right side, adding a width on the "container-div" is not changing it.

here is a screenshot of the application with the extra border: https://prnt.sc/okyg73

.floaticons {
  text-align: center;
  position: absolute;
  bottom: 0px;
  border: 1px black solid;
  border-radius: 500px;
  background: rgba(255, 255, 255, 0.3);
}

.icon {
  padding: 10px;
  width: 13%;
}
<div className="floaticons">
  <a href="/"><img className="one icon" src="http://lorempixel.com/400/200" width="" /></a>
  <a href="/"><img className="two icon" src="http://lorempixel.com/400/200" width="" /></a>
  <a href="/"><img className="three icon" src="../static/Earth.png" width="710px" /></a>
  <a href="/"><img className="four icon" src="http://lorempixel.com/400/200" width="" /></a>
  <img className="line1" src="http://lorempixel.com/400/200" />
</div>

Upvotes: 0

Views: 91

Answers (1)

Ajithraj
Ajithraj

Reputation: 528

Are you expecting like this

Run code snippet in full screen mode

.floaticons {
  text-align: center;
  position: absolute;
  bottom: 0px;
  border-radius: 500px;
  background: rgba(255, 255, 255, 0.3);
}

.floaticons img{
    border: 1px black solid;
}
.icon {
  padding: 10px;
  width: 13%;
}
<div class="floaticons">
  <a href="/"><img class="one icon" src="http://lorempixel.com/400/200" width="" /></a>
  <a href="/"><img class="two icon" src="http://lorempixel.com/400/200" width="" /></a>
  <a href="/"><img class="three icon" src="http://lorempixel.com/400/200" width="710px" /></a>
  <a href="/"><img class="four icon" src="http://lorempixel.com/400/200" width="" /></a>
  <img class="line1" src="http://lorempixel.com/400/200" />
</div>

Upvotes: 1

Related Questions