BOOTSTRAP4 横並び表示できない

Question

前提・実現したいこと

bootstrap4で画像と文章を横並びにしたいがうまく表示できない。

該当のソースコード

    <div class="row">

<div class="client voice clearfix col-md-8 col-md-offset-2">
        <div class="col-4">
          <img src="img/take.jpg" class="img-fluid">
        </div>
        <div class="col-8">
          <p>リモートワークという言葉がありますが、弊社では何も気にしません。求めるのは快適なコミュニケーションと信頼と成果物のみ。</br>
            <small>kred IT abroad.inc代表取締役　横田　猛夫</small>
          </p>
        </div>
      </div>

media only screen and (max-width: 1190px) and (min-width: 768px)
.answer .client.voice {
    max-width: calc(100% - 40px);
    margin: 0 auto;
}
.answer .client.voice {
    padding: 20px 0;
    font-size: 18px;
    text-align: left;
    font-style: italic;
    color: #777;
}
@media (min-width: 768px)
.col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

*, ::after, ::before {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}

.answer .client.voice {
    padding: 20px 0;
    font-size: 18px;
    text-align: left;
    font-style: italic;
    color: #777;
}
.answer {
    padding: 40px 0;
    text-align: center;
}
body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
<style>…</style>
body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    letter-spacing: 1.5px;
}
body, p, h1, h2, h3, h4, h5, h6 {
    text-rendering: optimizeLegibility;
    iased: ;
}

lement.style {
}
.col-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    float: left;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
*, ::after, ::before {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}
.answer .client.voice {
    padding: 20px 0;
    font-size: 18px;
    text-align: left;
    font-style: italic;
    color: #777;
}
.answer {
    padding: 40px 0;
    text-align: center;
}
```![イメージ説明](601eb9f7f5edef4c09e5706414fb6388.png)
### 試したこと
floatを使用したがうまくレイアウトできない。


### 補足情報（FW/ツールのバージョンなど）

Comments

[m.ts10806]

自身で指定したcssがあるのでしたらそちらもご提示ください。
また、どのように表示されるか、画面キャプチャもご提示いただけますか？

[twsoccer15]

変更しましたよろしくお願いします。

[退会済みユーザー]

これデベロッパーツールのコピペしてるんじゃ？
メディアクエリとかめっちゃ散乱しててよみにくいので
できればcssファイルの内容を書いていただきたく

[退会済みユーザー]

これデベロッパーツールのコピペしてるんじゃ？
メディアクエリとかめっちゃ散乱しててよみにくいので
できればcssファイルの内容を書いていただきたく

Answer 1

<!doctype html>
<head>
	<title>test</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">
</head>
<body>
<div class="row">
	<div class="client voice clearfix col-md-8 col-md-offset-2">
		<div class="row">
	        <div class="col-4">
	         	<img src="img/take.jpg" class="img-fluid">
	        </div>
	        <div class="col-8">
	          	<p>リモートワークという言葉がありますが、弊社では何も気にしません。求めるのは快適なコミュニケーションと信頼と成果物のみ。</br>
	            	<small>kred IT abroad.inc代表取締役　横田　猛夫</small>
	          	</p>
	        </div>
        </div>
    </div>
</div>
</body>

一つ目のrowはその直下のdivを１２分割のグリッドにしています。
画像と文章を横並びにするならこれらを別にrowでくくってやる必要があります。

あと、質問の前にコピペで検証できるようにしておくと回答が来やすいです。作っている最中に気づくことも多いかも。

Comments

[twsoccer15]

コメントありがとうございます。横に並べることができました。追加でお願いしたいことがあるのですが、pc上で表示するときに真ん中にもっていきたいのですが左に寄ってしまいます。どのようにすれば良いでしょうか。

[iwamoto_takaaki]

その場合、gridではなくflexboxの方がやりやすいかも・・・
<div class="d-flex justify-content-center">...</div>

bootstrapの公式は英語だけど、実例が豊富でわかり易いので参照ください。
https://getbootstrap.com/docs/4.3/utilities/flex/　

詳しく知りたい場合は、別途質問を立ててください。
（他の同様のケースで困っている方のためになります）

[twsoccer15]

コメントありがとうございます。boostrapはflexboxに対応しているという解釈でよろしいでしょうか。
回答のほどよろしくお願いいたします。

[iwamoto_takaaki]

リンクに書いてある通りです。ついでの話なので、これ以上詳しく説明するつもりはないです。
詳しい説明が必要な時は別建てで質問をお願いします。