floatで横並びにさせた要素でpaddingが効かない

Question

header_pクラスのpaddingが効きません。

どう対処すればpaddingが効くようになるでしょうか？

「現状」
[html]

<header class="clearfix">
  <h1><a href="index.html"><span>テスト株式会社</span></a></h1>
  <p class="header_p stripe1">お越しいただき、ありがとうございます。行政書士事務所テスト株式会社の公式ホームページです。</p>
</header>

[CSS]

header {
	width:930px;
	margin-top:20px;
}

h1 {
	display:block;
  	width:247px;
  	height:100px;
  	background-image:url("../img/main_logo.png");
  	background-repeat:no-repeat;
	float:left;
}

.header_p {
	width:653px;
	padding-left:20px;
	font-weight:bold;
	margin-left:10px;
	float:left;
}

.stripe1 {
	color: #ffffff;
	font-size: 16px;
	line-height: 20px;
	padding: 10px;
	background: repeating-linear-gradient(45deg, #ff8fcd, #ff8fcd 10px, #e4007f 10px, #e4007f 20px);
}
h1 span {
	display:none;
}

h1 a {
	display:block;
  	width:247px;
  	height:100px;
}

.clearfix {
 *zoom: 1;
}
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}

.header_pクラスのCSSの

padding-left:20px;

が効きません。

「試してみたこと」

header {
	width:930px;
	margin-top:20px;
}

ここに

overflow:hidden;

を追加してみましたが駄目でした。

.header_pクラスのCSSに

display:inline-block;

を追加してみても駄目でした。

Answer 1

.header_p {
    width: 643px;
    padding-left: 20px !important;
}

Comments

[退会済みユーザー]

ありがとうございます。.stripe1クラスに余計なpaddingが入っているのが原因でした。
回答頂いた方法も試してみたいと思います。

Answer 2

.stripe1クラスに余計なpaddingが入っているのが原因でした。