How to manipulate objects inside a div?

Question

I’m a beginner in web programming and I’ve done everything I know. Can anyone help me center these items next to each other preferably with smaller spacing???

NOTE: I was able to space too much or not as you can see in the images. My goal was to leave one next to the other.

Excerpt from the code:

Answer 1

Friend, a good one would be to create 3 Ivs and leave them that way in CSS:

div#cidade1 {
  min-width: 33%;
  max-width: 100%;
  position: relative;
}

Apply this to the 3 Ivs. I hope I helped :) This way, it already adapts to smartphones.

Answer 2

Hello @Jeferson-Heavy, let’s see if we can clear this idea... then you need 3 columns with an image and title within each. I’ll see if I can give you the best solution within your architecture. I will put here the excerpt that you should fix in your code, already I take the example for you see the ideal format to post the code here in the posts:

<style>
.box_wrapp{
    display:inline-block;
    width:100%;
    text-align:center;
}
.box{
    display:inline-block;
    width:150px;
    max-width:90%;
    margin:0 10px 10px 0;
}
.box .b_header{
    display:inline-block;
    width:100%;
    text-align:center;
    padding:10px 0 10px 0;
    font-size:12px;
}
.box .b_body{
    display:inline-block;
    width:100%;
    height:100px;
    border-radius:50%;
    overflow:hidden;    
    font-size:12px;
}
#box1 .b_body{
    background:url(pasta/img1.png)no-repeat center;
    background-size:cover;
    background-color:#e8e8e8; 
}
#box2 .b_body{
    background:url(pasta/img2.png)no-repeat center;
    background-size:cover;
    background-color:#e8e8e8;
}
#box3 .b_body{
    background:url(pasta/img3.png)no-repeat center;
    background-size:cover;
    background-color:#e8e8e8;
}
</style>

<div class="box_wrapp">

    <div class="box" id="box1">

        <div class="b_header">
        Título
        </div><!-- /b_header-->

        <div class="b_body"></div><!-- /b_body-->       

    </div><!-- /box1-->

    <!-- ... -->    

    <div class="box" id="box2">

        <div class="b_header">
        Título
        </div><!-- /b_header-->

        <div class="b_body"></div><!-- /b_body-->       

    </div><!-- /box2-->

    <!-- ... -->

    <div class="box" id="box3">

        <div class="b_header">
        Título
        </div><!-- /b_header-->

        <div class="b_body"></div><!-- /b_body-->

    </div><!-- /box3-->

</div><!-- /box_wrapp-->

https://jsfiddle.net/nmq6tecw/2/