Как сделать так, чтобы абзац соответствовал разной ширине браузера

Question

Я нахожусь в процессе создания шаблонов html и CSS для моих личных сообщений в блоге.Часть моего блога выглядит следующим образом:

.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>

Я хотел, чтобы абзацы всегда составляли 60% ширины браузера и всегда оставались по центру.Однако мой код CSS не работал - я попытался поместить text-align: center и width: 60% в каждый контейнер в моем разделе содержимого, но ничего не получалось.

Любая помощь с благодарностью !!!

Answer 1

В вашем коде добавление margin: auto; к .blog-content и удаление ширины, заданной .content, решит вашу проблему.

.content {
  text-align: center;
}

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

<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="http://via.placeholder.com/150x30" alt="NULL">
      </div>
      <p>
        This is the first paragraph!
      </p>
    </div>
  </div>
</section>

Answer 2

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

.blog_content относительно .content.

Answer 3

Вы дублируете декларацию ширины.Вам нужно только объявить ширину содержимого как 100%, а затем объявить его абзацы как 60%:

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

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

Альтернативно, и предпочтительно, вы можете присвоить своим тегам абзаца класс и нацелить их непосредственно в своем CSS.