HTML ボーダーラインのスタート位置を動かしたい

コード
HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheet.css">
    <title>corp_sample1</title>
  </head>
  <body>
    <header>
      <p>テキストテキストテキストテキストテキスト</p>
    </header>

    <div class="top1">
      <h1>BAAA Corporation</h1>
      <ul>
        <li>会社概要</li>
        <li>事業紹介</li>
        <li>採用情報</li>
        <li>お問い合わせ</li>
      </ul>
    </div>

    <img src="top-picture.jpg" class="top-picture">
    
    <p class="notice">お知らせ</p>

</html>
  </body>

ｃｓｓ
header{
        background-color:#4682b4;


}

header p{
  color:white;
  padding-left:100px;
}

.top1{
  display:flex;
}

.top1 h1{
  padding-left:100px;
  display: inline-block;
 
}

.top1 li{
  list-style:none;
  padding:20px;
  float:left;
  display:inline-block;
}

.top-picture{
  height:350px;
  width:1200px;
  padding-left:100px
}

.notice{
  border-bottom: 2px solid #024881;
  width:900px;
  padding-left:100px;
}
```![イメージ説明](f7f1adb939b6b4713898804cca25367b.png)
![イメージ説明](3afe8bbf10ebbe6f66e5b566bfc4d67e.png)
HTMLでサンプルをパクって練習をしています。
「お知らせ」の下のボーダーラインを1枚目の画像のようにスタート位置を「お知らせ」の下に動かしたいです。
ｃｓｓでどう記述すれば良いでしょうか？

退会済みユーザー

2018/07/06 09:00

回答に必要な情報を提示しましょう

退会済みユーザー

2018/07/06 09:49

ｈｔｍｌとｃｓｓ、全文のせてください

行動規範の内容に同意します

回答2件

ここを変更

diff
1.notice {
2    border-bottom: 2px solid #024881;
3    width: 900px;
4-    padding-left:100px;
5+    margin-left: 100px;
6}

投稿2018/07/06 10:02

編集2018/07/06 10:02

退会済みユーザー

総合スコア0

HiakruKuroda

2018/07/06 14:00

解決しました！ありがとうございます

行動規範の内容に同意します

ベストアンサー

貴方が書いたhtmlを載せてもらった方が良いかもしれません。
んで、まったくの想像&適当ですが

html

css
p{
padding-left:50px;
}

としている?とか？

投稿2018/07/06 09:34

Samson818

総合スコア162

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

HTML ボーダーラインのスタート位置を動かしたい

関連した質問