ヘッダーの段落テキストを整列する

Question

私は最初のウェブサイトをコーディングしており、イントロテキストの整列に問題があります。パラグラフは左に揃えられていますが、テキストボックスの幅は625ピクセルで、ページ全体の幅になります。私はそれを解決するためにパディングを使用しようとしましたが、テキストはページの同じ幅のままです。以下は私の現在のコードです。

HTML：

<header class="masthead"> 
    <div class="container"> 
    <div class="intro-text"> 
     <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. </p> 
    </div> 
    </div> 
</header> 

CSS：

header.masthead { 
    text-align: left; 
    color: white; 
    background-image: url("../img/headshot.png"); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: right; 
    background-size: 500px 601px 
} 

header.masthead .intro-text p { 
    padding-top: 50px; 
    padding-bottom: 100px; 
    padding-right: 500; 
} 

Answer 1

625px divをページの中央に配置しますか？その場合は、次の操作を行います。

.masthead .container { 
    margin: 0 auto; // center the div 
    max-width: 625px; 
} 

子divと段落ブロックの要素は自動的に最大幅625pxになります。

Answer 2

header.masthead .intro-text p { 
    padding-top: 50px; 
    padding-bottom: 100px; 
    padding-right: 500; 

    width: 625px; 
    } 

はyou'r要素に幅を追加します。