画像の横にできる謎の空間を無くして、フィットさせたいです。

Question

実現したいこと

画像の横にできる空白を無くして、フィットする大きさにしたいです。
下段の写真の黒丸内の空間を無くしたいです。

該当のソースコード

<div class="product-wrapper">
    <div class="container">
        <div class="heading">
            <h2>Products</h2>
        </div>
        <div class="products">
            <div class="product">
                <div class ="product-icon">
                    <a href="#"><img src="product-image.gif"></a>
                </div>
                <div class="product-text">
                    <a href="#"><p class="product-name">ソープディスペンサー</p></a>
                    <a href="#"><p class="product-price">¥1,800-</p></a>
                </div>
            </div>
            <div class="product">
                <div class ="product-icon">
                    <a href="#"><img src="product-image2.gif"></a>
                </div>
                <div class="product-text">
                    <a href="#"><p class="product-name">キャンドルホルダー</p></a>
                    <a href="#"><p class="product-price">¥1,200-</p></a>
                </div>
            </div>
            <div class="product">
                <div class ="product-icon">
                    <a href="#"><img src="product-image3.gif"></a>
                </div>
                <div class="product-text">
                    <a href="#"><p class="product-name">ブックエンド</p></a>
                    <a href="#"><p class="product-price">¥1,900-</p></a>
                </div>
            </div>
            <div class="product">
                <div class ="product-icon">
                    <a href="#"><img src="product-image4.gif"></a>
                </div>
                <div class="product-text">
                    <a href="#"><p class="product-name">ポット(植木鉢)</p></a>
                    <a href="#"><p class="product-price">¥800-</p></a>
                </div>
            </div>
            <div class="product">
                <div class ="product-icon">
                    <a href="#"><img src="product-image5.gif"></a>
                </div>
                <div class="product-text">
                    <a href="#"><p class="product-name">キャンドルホルダー</p></a>
                    <a href="#"><p class="product-price">¥800-</p></a>
                </div>
            </div>
            <div class="product">
                <div class ="product-icon">
                    <a href="#"><img src="product-image6.gif"></a>
                </div>
                <div class="product-text">
                    <a href="#"><p class="product-name">ポット(植木鉢)</p></a>
                    <a href="#"><p class="product-price">¥1,000-</p></a>
                </div>
            </div>
        </div>
        <div class="btn onlineshop">
            <a href="#">Online Shop</a>
        </div>
    </div>
</div>

.product-wrapper {
padding: 90px 0;
}

.products {
padding: 0 20px;
text-align: center;
}

.product-icon img{
width: 49%;
border: solid 0.1px #707070;
border-radius: 50%;
}

.product-text {
font-size: 18px;
}

.product-name {
font-weight: bold;
margin-bottom: -10px;
margin-top: 40px;
}

.onlineshop {
text-align: center;
font-weight: bold;
text-decoration: underline;
border-bottom : 5px solid rgba(229,228,227,0.55);
padding: 30px 0 100px 0;
margin: 0 -15px;
font-size: 25px;
}

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、問題が再現しませんでした。

ご提示いただいた部分には原因がなさそうです。
ご提示いただいていない部分に原因があるかもしれません。

[Kimuki]

ありがとうございます。
親のコード等も入れてみました、ご確認頂けますと幸いです。

Answer 1

.product-icon img{ 
width: 49%;

width のパーセンテージは親要素を基準にしますので、49%は親要素の幅の49%という意味です。
残りの51%は余白になってしまいます。
ですので、余白をなくしたいのであれば 100% とするのがいいかと思います。

Answer 2

提示されたソースでは確認ができません
どこかサンプルを上げて現象を確認できるようにした方がよいでしょう
inline-blockを横にならべて間があくという意味でしょうか？

ちなみにinline-block要素を羅列すると改行マークやインデントで若干の間隔があきます
それを認めない場合はflexデザインなど検討ください。