CSSでうまく配置ができない

前提・実現したいこと

写真１のように、創業メンバーのコメントと、borderの枠線をコンパクトにしたいです。
自分がコードをかくと写真２のようにborderの枠線とコメントが横に広がってしまいます。
原因がわかりません。よろしくお願いします。

発生している問題・エラーメッセージ

該当のソースコード

html
1div class="teacher">
2  <h2 class="txtl"><i class="fa fa-id-card-o" aria-hidden="true"></i>創業メンバー</h2>
3  <p class="txts">実際にフリーランスとして活躍している<br>エンジニアが立ち上げました</p>
4  <div class="teacherbox container">
5  <div class="row">
6    <div class="col-md-6 col-xs-12">
7      <img src="/Users/rhcp1415/Desktop/isara/isara/images/keisuke_someya.jpg" alt="">
8      <div class="detail">
9        <p class="txts">フリーランス講師</p>
10        <p class="txts">染谷　佳佑</p>
11        <div class="txtleft">
12          <p class="txts">ISARA (THAILAND) CO.,LTD.の代表です。学生起業の後にリクルートへ就職、その後独立し、海外移住しま
13            した。今はフリーランスとしてリモートワークで日本円を稼ぎ、外国通貨に変えて使い、海外を旅してます。営業、ブロ
14            グPVアップ(最高月間150万PV)、ビジネス構築が専門です</p>
15          </div>
16        </div>
17      </div>
18
19      <div class="col-md-6 col-xs-12">
20        <img src="/Users/rhcp1415/Desktop/isara/isara/images/yuki.png" alt="">
21        <div class="detail">
22          <p class="txts">フリーランス講師</p>
23          <p class="txts">成田　雄輝</p>
24          <div class="txtleft">
25            <p class="txts">バンコクのシェアハウスのオーナーをやりながら一年の大半をタイで過ごしています。
26               大学時代から今に至るまでネットだけで生計を立てているので、自由歴だけは講師陣の中
27               で最長です！ 母親がタイ人という事もありタイには精通してますので、こちらでの生活
28               のサポートはお任せください！</p>
29            </div>
30          </div>
31        </div>
32
33        <div class="col-md-6 col-xs-12">
34          <img src="/Users/rhcp1415/Desktop/isara/isara/images/shohey.png" alt="">
35          <div class="detail">
36            <p class="txts">フリーランスエンジニア</p>
37            <p class="txts">大滝　昇平</p>
38            <div class="txtleft">
39              <p class="txts">月の半分は東京の会社にリモートで勤めつつ、フリーでも活動しているエンジニアです。
40                Laravel・WordPressでのWeb制作がコアスキル。立ち上げメンバーとしてカリキュラ
41                ム原案制作に参画し、現在は外部アドバイザーをしています！</p>
42              </div>
43            </div>
44          </div>
45
46          <div class="col-md-6 col-xs-12">
47            <img src="/Users/rhcp1415/Desktop/isara/isara/images/manabu.png" alt="">
48            <div class="detail">
49              <p class="txts">フリーランスエンジニア</p>
50              <p class="txts">坂内　学</p>
51              <div class="txtleft">
52                <p class="txts">アドバイザーとして参画しました。新卒で海外就職して１１ヶ月後に退職。今は日本にい
53                  たり海外にいたりでゆるくフリーランスをしています。お仕事はWebマーケティングとプログラミングが専門領域です。</p>
54                </div>
55              </div>
56            </div>
57          #</div>
58        </div>
59      </div>
60
61コード

CSS
1.teacher {
2    padding: 20px 0;
3    background-image: url(https://isara.life/wp-content/themes/isara_v2/img/teacherbgsp.jpg);
4
5}
6.teacher {
7    padding: 40px 0;
8    text-align: center;
9    background-position: center;
10    background-size: cover;
11    color: #fff;
12    display: inline-block;
13}
14
15.txtl {
16    font-size: 18px;
17    font-weight: 600;
18}
19
20.fa {
21    display: inline-block;
22    font: normal normal normal 14px/1 FontAwesome;
23    font-size: inherit;
24    text-rendering: auto;
25    -webkit-font-smoothing: antialiased;
26    -moz-osx-font-smoothing: grayscale;
27}
28
29
30.col-xs-12 {
31    width: 100%;
32}
33
34.teacherbox img {
35    width: 120px;
36    z-index: 1;
37}
38.teacherbox img {
39    position: relative;
40    bottom: -35px;
41    border-radius: 50%;
42}
43img {
44    width: auto;
45    height: auto;
46    max-width: 100%;
47    max-height: 100%;
48}
49img {
50    vertical-align: middle;
51}
52img {
53    border: 0;
54}
55
56.detail {
57    padding: 40px 10px 10px 10px;
58    height: auto;
59}
60.detail {
61    padding: 80px;
62    border: 3px solid #fff ;
63}
64
65.detail .txts {
66  font-weight: lighter;
67  font-size: 18px;
68  
69}
70
71コード

試したこと

初心者なのでよく分かってないのですが、displayでインライン要素にしたり、float leftを試しました。

dit.

2020/03/11 00:38

ソースコードは画像ではなく本文にテキストで提示してください。その際、teratailにはコードを見やすくするための仕組みがありますので、コードブロックにしてください。質問文にコードをコピペ→コードを選択→<code>ボタンを押す→「ここに言語を入力」の部分をhtmlやcssに変更　の手順がやりやすいと思います。文字数制限に引っ掛かりそうな場合には現象が再現できる最低限のコードを抜粋してみてください。 https://teratail.com/help/question-tips#questionTips3-5-1

Lhankor_Mhy

2020/03/11 00:57

質問は何ですか？ 3-3. 質問詳細の最初に実現したいことを書きましょう https://teratail.com/help/question-tips#questionTips3-3 期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3 ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1 3-7. markdownを利用しましょう https://teratail.com/help/question-tips#questionTips3-7

Lhankor_Mhy

2020/03/11 03:22

質問変更拝読ご提示のコードを試してみましたが、枠線はコンパクトになっていました。つまり、「写真２のようにborderの枠線とコメントが横に広がってしまいます」という問題が再現しません。 rhcpさんはご提示のコード**だけ**で問題が再現しますか？再現するのであれば、環境の問題かと思います。問題が再現するであろう環境をご提示ください。再現しないのであれば、ご提示いただいていないコードの問題かと思います。問題が再現するコードをご提示ください。