bootstrapで紫の枠を消したい（詰めたい）

Question

実現したいこと

この画像でいう、右側にある紫色の余白を消したいです。詰めることができればOKです。

発生している問題・分からないこと

「実現したいことを教えてください」参照ください。

エラーメッセージ

エラーメッセージは特にありません。

該当のソースコード

<div class="container">
                <div class="row col-12">
                    <div class="col-3">
                        <a class="navbar-brand p-0" href="http://localhost:8020/text">アイコン</a>
                    </div>
                    <div class="col-6 text-center">
                        <img src="http://localhost:8020/img.png" alt="" style="width: 76px; height: 40px">
                    </div>
                    <div class="col-3 bg-dark">aaaa</div>

                    <div class="col-xl-9 bg-light">
                        <div id="">
                            <form class="" action="http://localhost:8020/search">
                                <input class="" type="search" value="fafafa">
                                <button class=""><img src="http://localhost:8020/imgIcon.png"></button>
                            </form>
                        </div>
                    </div>
                    <div class="col-xl-3 d-flex align-items-center text-center small font-weight-bold pl-0 pr-0">
                        <div class="col p-0 mt-2"><span class="p-2" style="cursor: pointer">カテゴリから探す</span></div>
                        <div class="col p-0 mt-2"><span class="p-2" style="cursor: pointer">カテゴリから探す</span></div>
                    </div>
                </div>
            </div>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

https://www.rectus.co.jp/archives/7185
検索してみたところ、このような記事を見つけました。
d-inline-flexなどbootstrap内蔵のクラスを付与したりしてみましたが、紫色の枠は消えませんでした。

補足

できるだけ、bootstrap純正のクラス名を付与して消したいです。

bootstrapのバージョン
<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">

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、ご提示の問題は再現しませんでした。ご提示されていない部分に原因がありそうです。

Answer 1

<div class="row col-12">となっていますが、外側はrowだけにするものではないでしょうか。

https://getbootstrap.jp/docs/4.2/layout/grid/

Comments

[meex]

ありがとうございます。
お教えいただいたURLに加え、https://qiita.com/akatsuki174/items/53b7367b04ed0b066bbf も観て確認したところ、下記コードで実現できました。
紫色の枠は、「まだ確保している枠内に余裕がありますよ」的なものなんですね。
今回は中央揃えで偏っていた紫色を分散することで、納得いくレイアウトを作ることができました。

<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm fixed-top">

<div class="container justify-content-center">
<div class="row col-xl-10 pl-0 pr-0">
<div class="col-12 pl-0 pr-0 bg-light">
<div class="row">
<div class="col-3">.col-6 .col-md-4</div>
<div class="col-6">.col-6 .col-md-4</div>
<div class="col-3">.col-6 .col-md-4</div>
</div>
</div>

<div class="col-12 pl-0 pr-0 bg-light">
<div class="row">
<div class="col-3">.col-6 .col-md-4</div>
<div class="col-6">.col-6 .col-md-4</div>
<div class="col-3">.col-6 .col-md-4</div>
</div>
</div>
</div>
</div>
</nav>