前提・実現したいこと
HTML,CSSのアウトプットの為 iSara様のサイト模写をしているのですが、
bootstrapのcolをうまく再現することが出来ません。
検証からそのままコピペしてCSSも真似してみたのですが、どうしても横並びになりません。
こちらのサイトの(ノマドエンジニアとして自由に稼ぐことは「 本当に 」可能なのか?)の項目の部分です。
発生している問題・エラーメッセージ
![キャプチャです](b2baf289c877302869b885338d4d1d4f.png)
該当のソースコード
html
1<div class="container"> 2 <div class="row"> 3 4 <div class="answer-inner clearfix col-md-8 col-md-offset-2"> 5 <div class="col-xs-4"> 6 <img src="img/take.jpg"> 7 </div> 8 <div class="col-xs-8"> 9 <p>リモートワークという言葉がありますが、弊社では何も気にしません。エンジニアに求めるのは、快適なコミュニケーションと信頼と成果物のみ。</p> 10 <small>Kredo IT Abroad . Inc 代表取締役 横田 猛夫</small> 11 </div> 12 </div> 13 14 15 <div class="answer-inner clearfix col-md-8 col-md-offset-2"> 16 <div class="col-xs-4"> 17 <img src="img/minami_sato.jpg"> 18 </div> 19 <div class="col-xs-8"> 20 <p>社内でスキルのある人材を採用するのは難しい。外部パートナーとして継続的に依頼できるフリーランスには助かっています。 </p> 21 <small>SAPEUR . Inc 代表取締役 佐藤 陽</small> 22 </div> 23 </div> 24 25 <div class="answer-inner clearfix col-md-8 col-md-offset-2"> 26 <div class="col-xs-4"> 27 <img src="img/asada.jpg"> 28 </div> 29 <div class="col-xs-8"> 30 <p>プログラマーが足りていないときに外部リソースとして、フリーランスに発注しています。今はどこの会社でもエンジニアが不足していますね。 </p> 31 <small>株式会社BeautifulWorks 代表取締役 淺田 百合</small> 32 </div> 33 </div> 34 35 </div> 36 </div>
css
1.answer-inner{ 2 padding:20px 0; 3 font-style:italic; 4 font-weight:400; 5 color:#777777; 6} 7 8.answer-inner img{ 9 border:3px #EBB94D solid; 10 width:auto; 11} 12 13.answer-inner p{ 14 font-size:18px; 15 line-height:29px; 16 margin-top:15px; 17 font-weight:400; 18} 19 20.answer-inner small{ 21 font-size:15px; 22 line-height:24px; 23 text-decoration: underline; 24 margin:8px 0 10px 0; 25}
試したこと
classの"clearfix col-md-8 col-md-offset-2"を消した状態でも特に変わりません。
このように1つの"answer-inner"クラスに対して1つの"row"クラスを設置しても出来ませんでした。
html
1<div class="row"> 2 <div class="answer-inner> 3<!-- 省略 --> 4 </div> 5<div> 6 7<div class="row"> 8 <div class="answer-inner> 9<!-- 省略 --> 10 </div> 11<div> 12 13<div class="row"> 14 <div class="answer-inner> 15<!-- 省略 --> 16 </div> 17<div> 18