Max width forces off center?

1

Could anyone explain why the addition of “max-width: 500px;” in this code forces the paragraph off center?


  <style>
      body{
        background-image: url("bg.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center top;
          
      }
      
      header {
        min-height: 250px;
      }
    
      main {
        text-align: center;
        padding: 20px;
        margin: 20px;
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
        
          
      } 
      
     
      p {
        padding: 20px;
        margin: 20px;
        border-style: solid;
        border-width: 5px;
        border-radius: 10px;
        background: whitesmoke;
        max-width: 500px
      
      }
      
      
     
     
      
  </style>

 </head>
 <body>

    <header>
    </header>
     
     
    <main>
        <h1>Title Text Goes Here
        </h1> 
        <p> Notice: This area will have several lines of text. Notice: This area will have several lines of text. Notice: This area will have several lines of text. Notice: This area will have several lines of text. Notice: This area will have several lines of text.
        </p>
    </main>
  
 </body>
2

Because the text-align: center you have set on <main> only affects text, not the <p> itself. If you don’t have max-width on the <p> then it takes up as much horizontal space as it can and thus looks centered in the <main>. Putting a max-width on it that is less than the width of <main> keeps up from taking up that whole width.

In anticipation of your next question, here is how to center block elements:

3

I was actually using that link to get me this far…that was what led me to add “margin-left: auto;” and same for the right. Then I assumed adding the max-width would give me what I wanted from there.

4

I don’t see auto set for margin-left/right in your code above. But yes, that would be one way to center the <p>.

Update: OK, I see the auto side margins above but they are on <main>. They need to be on <p> as well.

5

I updated the code, before I read your update…I was thinking that may be the case. I had assumed that

would inherit the auto margins…it still didn’t work though. I ran another text by adding auto side margins to the div that I surrounded

in as well…still didn’t work. Sorry to be such a noob here. Struggling with something that looks like it should be simple. I have even tried different images to see if the image is impacting it…but nothing.

 <style>
      body{
        background-image: url("bg.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center top;
          
      }
      
      header {
        min-height: 250px;
      }
    
      main {
        text-align: center;
        padding: 20px;
        margin: 20px;
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
        
          
      } 
      
     
      p {
        padding: 20px;
        margin: 20px;
        border-style: solid;
        border-width: 5px;
        border-radius: 10px;
        background: whitesmoke;
        margin-left: auto;
        margin-right: auto;
        
      
      }
      
      #notice {
        max-width: 500px;
margin-left: auto;
        margin-right: auto;
      }
      
      
     
     
      
  </style>

 </head>
 <body>

    <header>
    </header>
     
     
    <main>
        <h1>Title Text Goes Here
        </h1> 
        <div id="notice">
        <p> Notice: This area will have several lines of text. Notice: This area will have several lines of text. Notice: This area will have several lines of text. Notice: This area will have several lines of text. Notice: This area will have several lines of text.
        </p>
        </div>
    </main>
  
 </body>
</html>
6

I just got it! I had made another assumption of inheriting it. Thank you!