title: How do I make a paragraph of text display as a square/rectangle in CSS
body: <p>I have created a modal popup and have been trying to figure out how to make the text in the modal justified on top, bottom, left, and right (displaying as a rectangle/square).  I have tried <code>block</code> but is not working.</p>
  
  <p>So the modal <code>section</code>  text looks something like this:</p>
  
  <pre><code>xxxxxxxx xxx xxxx xx xxx xxxxx xxx xxxxxxxxx
  xxx xxxxx xx xxxxx xxxx xxxx  xxxx xxxxxxxx 
  xxxx xxxxxxxx xx xxxxx xx xx xxxx xxx x xxxxxxx
  xx x x  x xx xxxxx x x  x x xx  x xxx x x x 
  </code></pre>
  
  <p>and is jagged right.</p>
  
  <p>how do I make it so there is no jagged edges like.</p>
  
  <pre><code>xxxxxxxx xxx xxxx xx xxx xxxxx xxx xxx xxxx  xx
  xxx xxxxx xx xxxxx xxxx xxxx  xxxx xx   xxxxx x 
  xxxx xxxxxxxx xx xxxxx xx xx xxxx xxx x xxxxxxx
  xx x x  x xx xxxx x x  x   x  x xx  x xxx x x x 
  </code></pre>
  
  <p>I have been trying for a while now and can't seem to get it.</p>
  
  <p>EDIT:  Added CSS</p>
  
  <pre><code>#modal{
  background-color:    #4D94B8;
  outline-color:    #180238;
  border: 1px solid #3B7593;
  border-radius: 80px;
  font-family:  arial;
  text-align: justify;
  display:  inline-block;
  text-align:  justify;
  left: 50%;
  top: 50%;
  width:24%;
  height:50%;
  z-index: 1000;
  margin-left: 35%;
  margin-top:  7%;
  }
  
  .mHeader{
      text-decoration:    underline;
      text-align:         center;
      padding-top:      20%;
      font-size:          1vw;
  }
  
  .mButton{
      background-color:   #929292;
      border-radius: 100%;
      color:    #FFFFFF;
      text-align:center;
          height: 1.5vw;
          width: 7vw;
      margin-top:  5%;
      margin-bottom:  5%;
      margin-left:  36.5%;
      margin-right: auto;
      font-size:  .72vw;
      border-style:  none;
      border: 1px solid #666666;
  }
  
  section{
      padding-left: 10%;
      padding-top:  1%;
      margin-left: auto;
      margin-right: auto;
       font-size:  .9vw;
      font-weight:  bold;
      display:   block;
      line-height:  20px;
      margin-top:   0%;
      margin-left: auto;
      margin-right: auto;
  text-align:  justify;
  }
  </code></pre>
  
  <p>Im new to web development and Im sure there is a lot of css that doesn't belong here...please don't laught at me.</p>
  
  <p>EDIT:  Here is jsFiddle link:  <a href="https://jsfiddle.net/n8LLdvme/" rel="nofollow">https://jsfiddle.net/n8LLdvme/</a></p>