How to make paragraph fit different browser width

Question

I am in the process of building up a html and CSS template for my personal blog posts. The portion of my blog content is as follow:

.content {
  text-align: center;
  width: 60%;
}

.blog_content {
  background-color: white;
  width: 60%;
}

<section class="content">
  <div class="row">
    <div class="blog_content">
      <h2>This is the post title!</h2>
      <h3>Title description!</h3>
      <div class="photo">
        <img src="#" alt="NULL">
      </div>
      <p>
        This is the first paragraph!
      </p>
    </div>
  </div>
</section>

I wanted to make paragraphs always 60% of the browser width and always remain centered. However, my CSS code did not work-I tried putting text-align: center and width: 60% in every container in my content section, but nothing worked.

Any assistance greatly appreciated!!!

Answer 1

You are duplicating your width declaration. You need only to declare the content width as 100% and then declare its paragraphs as 60%:

.content {
    text-align: center;
    width: 100%;
}

.content > p {
  background-color: white;
  width: 60%;
  margin: 0 auto;
  display:block;
}

Alternately, and preferably, you may give your paragraph tags a class and target them directly within your CSS.