Linked Questions

Popular Questions

So I am trying to center my paragraph in the middle of the page while creating some left and right margin "empty spaces".

My goal is to put it in a text-box like style and have it center of the page while creating empty columns on the left and right hand side of the page. I like what I have in desktop mode but it is "stationary" and not responsive. When you resize your browser in responsive mode, it does not stay center. Here is an example of what I'm trying to achieve as shown in my quick sketch below and my codes.

GOAL: Also when I resize my browser to mobile, I want that "text-box" to start filling the margins so that it looks readable when you're on your phone or tablet. BONUS: I want to change the width or margin size for either side of the text-box to make it look good and evenly along with my other contents that I have in my full html document. This is just a part of my html document.

NOTE: When you run the code snippet, I suggest you click onto Full Page so that you can see what I'm talking about to make it easier to follow along.

enter image description here

.mainSummary {
  text-align: center;
  margin-left: 600px;
  margin-right: 600px;
}
<link rel="stylesheet" type="text/css" href="style.css">

<div class="mainSummary">
  <p style="background-color: lightblue; border: 2px solid lightgreen; border-radius: 10px; text-align: center; font-size: 22px;">
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
    animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
    est, omnis dolor repellendus.
  </p>
</div>

Related Questions