ｄｔ ｄｄ要素を横並びにしたい

Question

画像下の赤い丸部分の、日付と文章を横並びにしたいです。
dlにdisplay: flex;やdtにfloat:left;を記述してみましたが横並びになりませんでした。
どのように記述すれば横並びになるでしょうか？
ご教授頂ければ幸いです。
![

<div class="main">
 		 <div class="submain1">
 			<h2><img class="maru" src="mark1.png">テンプレートのご利用前に必ずお読み下さい</h2>
 			<h3>利用規約のご案内</h3>
 			<p>このテンプレートは、<a href="#">Template Party</a>にて無料配布している『ビジネス・企業向け無料ホームページテンプレート tp_biz35』です。必ずダウンロード先のサイトの<a href="#">利用規約</a>をご一読の上でご利用下さい。</p>
 			<p><span class="color1">■HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。</span><br>わざと見えなく加工する事も禁止です。</p>

 			<p><span class="color1">■下部の著作を外したい場合は</span><br><a href="#">Template-Party</a>の<a href="#">ライセンス契約</a>を行う事でHP下部の著作を外す事ができます。</p>

 			<h3>テンプレートに梱包されているjsファイル(javascript)について</h3>
 			<p>これらのファイルは全て<a href="#">有限会社クリタス様</a>提供のプログラムです。jsファイルは改変せずにご利用下さい。
            <br>また、当サイトのテンプレート以外に使いたいなど、「プログラムのみ」を使う場合は<a href="#">こちらの規約</a>をお守り下さい。</p>

            <h3>当テンプレートの詳しい使い方は</h3>
 			<p><a href="#">詳しくはこちらをご覧ください。</a></p>

 			<h2><img class="maru" src="mark1.png">企業向けCMSプログラム販売中</h2>
 			<p>トップページや会社概要ページや業務案内ページなどの各ページレイアウト設定済みのプログラムを販売中です。<a href="#">詳しくはこちらをご覧下さい。</a></p>
            
         <div class="submain2">
 			<h2><img class="maru" src="mark1.png">更新情報・お知らせ</h2>
 		 </div>

 		 
 		 <dl>
 		 	<dt>2017/02/27</dt>
 		 	<dd>html,cssを中心に更新。旧ファイルが必要な場合はお問い合わせ下さい。</dd>
 		 </dl>

 		
 	</div>

.main{
    overflow: hidden;
}

.submain1 h2{
    background: black;
    color: #fff;
    letter-spacing: 0.1em;
    font-size: 14px;
    height: 40px;
    display:flex;
    align-items:center;
    margin-bottom: 15px;
}

.submain1 h3{
    border: 1px solid #ccc;
    background: linear-gradient(#FFF, #ebebeb);
    font-size: 14px;
    height: 40px;
    display:flex;
    align-items:center;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    padding-left: 15px;
}

.submain1 p{
    line-height: 2;
    font-size: 14px;
    background: blu;
    padding-left: 15px;
    padding-bottom: 10px;
}

.color1{
    color: #000;
    font-weight: bold;
    background: re;
}

a{
    color: #333;
    transition: 0.5s;
}

a:hover{
    color: #000;
    text-decoration: none;
}

.submain2{
    padding-top: 25px;
}

.dl{ 
    background: blue;
    display: flex;
}

Answer 1

.dl{ のドットか余分です。これだとdlクラスのセレクタになります。
dl { とすれば反映されます。

ただし、これだとすべてのdl要素に反映されてしまうので、dl要素にclassを設定してそれに対するセレクタで設定するか、下記のように親のセレクタから指定するといいでしょう。
もちろんすべてのdlに共通の設定ならdl { でOKです。

.submain1 dl {
    background: blue;
    display: flex;
}

Comments

[dehi0923]

記述の通りコードを書いたらできました。初歩的な質問にご回答にして頂いて、ありがとうございます。