【html】ｈ1を下げるには? 助けてください

Question

このように、ロゴを売るという文字が右にずれてしまっています。
「ロゴを売る」を下げるにはどうすればいいでしょうか。

<div class="contents">
      
<div class="contents-top">
        
<h1>ロゴを買う
</a></h1>        
<div class="contents-top-item">
          
<h2 class="common"><a href="page2.html">アイコン</a></h2>
          
<p>ツイッター用や、フェイスブック用もあります。</p>
        
</div>
  
<div class="contents-top-item">
<h2 class="b"><a style="text-decoration: none; color:#ED7000;" href="page2.html">ヘッダー画像</a></h2>
<p>ホームページ制作や、SNSのヘッダーに使えます。</p>
</div>            
<div class="contents-top-item">
<h2 class="c"><a style="text-decoration:none; color:#007CEC;  href="page2.html">壁紙</a></h2>
<p>スマホの壁紙に使えます。</p>
</div>
</div>

<div class="contents-top-item2">
<div class="contents-top-item">
          
<h2 class="d"><a style="text-decoration: none; color:#007CEC;" href="page2.html">自由</a></h2>
          
<p>自由な発想のロゴがたくさんあります。</p>
</div>
           
      
          
      
</div>

<div class="contents-bottom">
       
 <h1>ロゴを売る</h1>

<div class="contents-bottom-item">
<h2 class="common"><a href="page2.html">ふつうのロゴ</a></h2>
<p>0円からでも売れます。</p>
</div>
<div class="contents-bottom-item">
<h2 class="b"><a style="text-decoration: none; color:#ED7000;" href="page2.html">ドットロゴ</a></h2>
<p>専用のツールを使えます。</p>
</div>
<div class="contents-bottom-item">
<h2 class="c"><a style="text-decoration: none; color:#007CEC;" href="page2.html">ロゴを作ってもらう</a></h2>
<p>依頼者の条件にそったロゴを作りましょう。</p>
</div>
</div>
  
</div>

.contents
{
  height: 1000px;
  background-color: #EBF5FE;
  width: 950px;
  float: left;
padding:30px;
}

.contents-top{
  height:150px;
}

.contents-top h1{
  margin-bottom:30px;
}

.contents-top-item {
  float:left;
  width:270px;
  padding-right:30px;
}

.contents-top-item2{
float:left;
width:270px;
padding-right:30px;
margin-bottom:100px;
}

.contents-top-item h2{
  margin-bottom:10px;
  width:220px;
}

.contents-bottom-item{
float:left;
width:270px;
padding-right:30px;
}


.common a{
transition:1s;
text-decoration:none;
}

.common a:link{
color:#EC007C;
}

.common a:hover{
color:#FEA3D3;
}


width:135px;


.b:hover{
background-color:#FFBB7F;
width:95px;
}

Answer 1

とりあえずcssに

.contents-bottom{
float:left;
}

を追加すれば左に寄りますね

Answer 2

典型的なfloat解除に失敗してる例ですね。

ボックスにfloatを指定して横に並べた場合、
横に並べたボックスの隣にまだ隙間があれば、
その隙間に後続要素が回りこんで表示が崩れます。

以下のサイトで基本のfloatレイアウトとfloat解除の仕組みを勉強すると良いと思います。

▼基本のfloatとfloatのclear
http://www.css-designsample.com/beginner/hp/float-base.html
▼clearfix
http://kojika17.com/2013/06/clearfix-2013.html

Answer 3

以下のように、デザインを一旦解除してあげると、後述のデザインをしやすいですよ。

</div>

<div style="clear:both;"/>

<div class="contents-bottom">

Answer 4

css内のcontents-top-item2クラスで、widthプロパティを無効にするのも1つの案です。

.contents-top-item2{
float:left;
/width:270px;/
padding-right:30px;
margin-bottom:100px;
}