アイコンの下に文が来てしまうのをアイコンの右隣りに来るようにしたい

footerのAirbnbアイコンの右に文がくるようにしたいです
floatなどは試してみましたがうまくできませんでした

<!<!DOCTYPE html>

<head> <meta charset="utf-8"> <link rel="shortcut icon" href="img/punimaru.jpg" > <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <title>airbnbmosya</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <nobr> <i class="fab fa-airbnb fa-2x ml-4 my-2 my-red"></i> <form method="get" action="http://www.google.co.jp/search" target="_blank"> <input type="text" name="q" size="31" maxlength="255" value=""> <input type="submit" name="btng" value="検索"> <input type="hidden" name="hl" value="ja"> <input type="hidden" name="sitesearch" value="web-officer.com"> </form> </nobr> </div> <div class="alert alert-primary alert-dismissible"> <i class="fas fa-comment"></i> <a>今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。</a> <button type="button" class="close" data-dismiss="alert"> <span>×</span> </button> </div> <div class="top-wrapper"> <div class="top-content"> <h1>旅を贈ろう。</h1> <p>Airbnbギフトカードで、世界をぐんと身近に</p> <button type="button" class="btn btn-light btn-lg"> <a class="text-secondary">ギフトカードを登録</a> </button> </div> </div> <div class="container-fluid my-4"> <h1 class="text-center text-secondary my-4">いつも完璧な贈りもの</h1> <div class="row"> <div class="col-md-4 col-sm-12 text-center my-4"> <i class="content-icon far fa-envelope fa-4x text-info"></i> <h4>簡単に使える</h4> <p class="text-dark">ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p> </div> <div class="col-md-4 col-sm-12 text-center my-4"> <i class="content-icon fas fa-stopwatch fa-4x text-info"></i> <h4>有効期限なし</h4> <p class="text-dark">Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p> </div> <div class="col-md-4 col-sm-12 text-center my-4"> <i class="content-icon fas fa-plane fa-4x text-info"></i> <h4>忘れられない旅</h4> <p class="text-dark">お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p> </div> </div> </div> <div class="login text-center bg-info"> <img src="img/box.png" class="my-4 pt-5"> <h2 class="text-white"><b>ギフトカードをもらったら…</b></h2> <h4 class="my-4 pb-5 text-white">ログインあるいは利用登録してギフトを登録するだけです。<br>あとは使い途をゆっくり考えましょう。</h4> <button type="button" name="button" class="btn btn-danger btn-lg">ギフトカードを登録する</button> <p class="text-dark my-4 pb-5">Airbnbギフトカードの仕組みは？</p> </div> <div class="container-fluid pconly"> <div class="row "> <div class="col-md-3 my-4"> <h5 class="ml-4"><b>Airbnb</b></h5> <ul style="list-style:none;"> <li>採用情報</li> <li>ポリシー</li> <li>ヘルプ</li> <li>企業情報</li> </ul> </div> <div class="col-md-3 my-4"> <h5><b>スタッフのおすすめ</b></h5> <ul style="list-style:none;"> <li>信頼&安全</li> <li>お友達紹介クーポン</li> <li>出張</li> <li>ガイドブック</li> </ul> </div><div class="col-md-3 my-4"> <h5 class="ml-4"><b>ホスティング</b></h5> <ul style="list-style:none;"> <li>ホストになる理由</li> <li>おもてなしの心</li> <li>体験を掲載</li> <li>コミュニティセンタ</li> </ul> </div> <div class="col-md-3 my-4"> <p class="ml-3"> <i class="fab fa-facebook-f fa-lg"></i> <i class="fab fa-twitter fa-lg ml-2"></i> <i class="fab fa-instagram fa-lg ml-2"></i> </p> <ul style="list-style:none;"> <li>利用規約</li> <li>プライバシー</li> <li>サイトマップ</li> </ul> </div> </div> </div> <hr class="my-4"> <footer> <i class="fab fa-airbnb fa-2x ml-4 "></i>

    <p>Airbnb Global Services Limited
        <br>観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)
        <br>© 2019 Airbnb, Inc. All rights reserved.</p>

</footer> </body>

.my-red{
color: red;
}
.alert a{
font-size: 14px
}
.top-wrapper{
background-image: url(img/tabi.jpg);
height: 100%;
width: 100%;
background-size: cover;
}
.top-wrapper h1{
color: white;
padding-top: 180px;
font-weight: bold;
font-size: 70px;
}
.top-wrapper p{
color: white;
padding-top: 20px;
font-size: 20px;
}
.top-wrapper a{
padding-top: 30px;
}

.top-content {
padding-left: 140px;
}
@media all and (max-width: 767px) {
.top-content {
padding-left: 10px;
}
.pconly{
display: none;
}
}
.text-center{
text-align: center;
}
ul{
list-style: none;
}

otamunote

2019/04/25 08:18

Airbnbアイコンとはどこの個所をさしていますか？ footerのロゴでしょうか？コードだけではashrun様が明確にイメージされいている内容が読み取れない部分もあるので、もう少し詳しく教えていただければと思います。質問は編集できますのでそこから追加、ならびにコードはMarkdownでcodeを利用したほうが見やすいかと思います。