最后一个div转到一个新行，填充百分比为

Question

我是html / css的新手，我试图为网站做一个自适应标题。我使用padding-right，5％用于div，但是las div总是换到新行，而父div不想扩展。我希望父div扩展，具体取决于子div中的文本。此外，当我在px中使用填充时，一切正常，但它失去了自适应部分。 我做错了什么？

填充百分比

以像素为单位填充

HTML和CSS

＆＃13;

＆＃13;

button{
    height:34px;
    width:100%;
    font-weight:bold;
    border:none;
    background-color:#fc592d;
    color:#ffeded;
    border-radius:4px;
}

＆＃13;

<div style="width: 100%; background-color: rgb(44, 62, 80); float: left;">
    <div style="width: 47.36%; height: auto; margin: auto;">
    <div style="display: inline-block; float: left; padding-bottom: 4%; padding-top: 4%;">
        <div style="display:inline-block; padding-right:5%;">
        <img src="images/icon1.png" alt="farkops">
        <a class="href" href="#">One thing</a>
        </div>
        <div style="display:inline-block; padding-right:5%;">
        <img src="images/icon2.png" alt="pricep">
        <a class="href" href="#">Second</a>
        </div>
            <div style="display:inline-block; padding-right:5%;">
        <img class="href" src="images/icon3.png" alt="otzivi">
        <a  class="href" href="#">Three</a>
            </div>
                <div style="display:inline-block;">
        <img src="images/icon4.png" alt="works">
        <a class="href" href="#">Fourth thing</a>
                </div>
    </div>
    <div style="float: left; display: inline-block; margin-top: 1.24%; margin-left: 2%;">
        <div style="">
        <p style="margin: 0px; padding-bottom: 8px; font-weight: bold; font-size: 3vh;"><span>7 (905)</span> 639-29-03</p>
        </div>
        <div style="">
        <button>Call</button>
        </div>
    </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

UPD1： 当我添加一个新div时，前一个正好适合（父div按我的意愿扩展），但是新的div转到新行。