CODEWITHSUNDEEP
htmlcssresponsive-design
Avery9115
Avery9115

Reputation: 135

Aligning Paragraph Text in Header

I'm coding my first website and I am having trouble aligning the intro text. Right now the paragraph is aligned to the left which is great, but I'm trying to have the text box be only the width of 625px and right now it's spanning the entire width of the page. I tried to use padding to resolve it, but the text just remains the same width of the page. Below is my current code any help would be great!

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;
}

Upvotes: 0

Views: 40

Answers (2)

Sam
Sam

Reputation: 462

Do you want to align the 625px div in the middle of the page? If so, do the following:

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

Now your child div and paragraph block elements will automatically take the max-width of 625px.

Upvotes: 1

C.Schubert
C.Schubert

Reputation: 2064

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

    width: 625px;
  }

add a width to you'r element.

Upvotes: 0

Related Questions