How to get both sides of text to align

Question

I have got the following main html page and I am trying to do a text-align: justfiy; justify: inter-words; but it doesn't seem to work. Is this mean to line both sides of the the text to make it look like a block? I am not sure if I explain this well enough but hope you guys understand what I am after:

div.service1 p {
  font-size: 20px;
  color: #000000;
  max-width: 250px;
  text-align: justify;
  text-justify: inter-word;
  margin-left: 20px;
  margin-top: 20px;
}

<div class="main-wrapper">
  <div class="first">
    <h2>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home! It doesn't matter if your child has no music foundation because there are lessons suitable for beginners and advanced students! Based
      on the "Bastien Piano Basics series", your child will be able to learn the basic hand positions, posture, finger numbers and letter names!<br>There are four levels in the "Bastien Piano Basics" series, beginning with the primer level, which is suitable
      for beginners. Once your child has completed the primer level, your child will be able to progress to Level 1, follow by Level 2 and Level 3.<br>Currently, PianoCourse101 lessons are mainly for children but we also encourage if you are an adult
      and also wish to learn how to play the piano to join us! In due course, there will also be lessons for adults!</h2>
  </div>
</div>

<div class="form">
  <form class="signup-form" action="newsletters.php" method="POST">
    <div class="newsletters">
      <label>Enter your E-mail Address</label>
    </div>
    <br>
    <div class="index_form">
      <input type="text" name='email' placeholder="Enter E-mail Address">
    </div>
    <br>
    <button type="submit" name="submit">Subscribe to PianoCourse101!</button>
    <br>

  </form>
</div>

<img class="snoopy" src="includes/pictures/snoopy.jpg" alt="snoopy playing the piano" />

<div class="services_heading">Services</div>
<div class="services">
  <div class="service1">
    <h1>Level 1</h1>
    <div class="image">
      <a href="signup.php">
        <p id="piano">&#127929;</p>
      </a>
    </div>
    <p>Purchase the Level 1 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $100<br>Yearly fee: $800</p>
  </div>

  <div class="service1">
    <h1>Level 2</h1>
    <div class="image">
      <a href="signup.php">
        <p id="violin">&#127931;</p>
      </a>
    </div>
    <p>Purchase the Level 2 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $150<br>Yearly fee: $1300</p>

  </div>
  <div class="service1">
    <h1>Level 3</h1>
    <div class="image">
      <a href="signup.php">
        <p id="sax">&#127927;</p>
      </a>
    </div>
    <p>Purchase the Level 3 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $200<br>Yearly fee: $1800</p>
  </div>
</div>

I tried using inter-word but it only lines up the left hand side...

Answer 1

From your question, it’s very difficult to discern what you exactly want.

If you wanted for prices to align with the right edge, you should use flexbox for parts of the layout.

If you would like to align text flush right while using text-align: justify, you need to enable hyphenation with the following CSS proprety:

-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

.main-wrapper {
  text-align: justify;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

div.service1 p,
dl {
  width: 250px;
  margin-top: 20px;
  margin-left: 20px
}

dl,
dl div {
  display: flex
}

dl {
  flex-direction: column
}

dl div {
  justify-content: space-between
}

<div class="main-wrapper">
  <div class="first">
    <h2>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home! It doesn't matter if your child has no music foundation because there are lessons suitable for beginners and advanced students! Based
      on the "Bastien Piano Basics series", your child will be able to learn the basic hand positions, posture, finger numbers and letter names!<br>There are four levels in the "Bastien Piano Basics" series, beginning with the primer level, which is suitable
      for beginners. Once your child has completed the primer level, your child will be able to progress to Level 1, follow by Level 2 and Level 3.<br>Currently, PianoCourse101 lessons are mainly for children but we also encourage if you are an adult
      and also wish to learn how to play the piano to join us! In due course, there will also be lessons for adults!</h2>
  </div>
</div>

<div class=service1>
  <h1>Level 1</h1>
  <div class=image>
    <a href=signup.php>
      <h2 id=piano>🎹</h2>
    </a>
  </div>
  <p>Purchase the Level 1 Subscription plan!<br><br> Learn how to play the piano right from the comfort of your own home!
    <dl>
      <div>
        <dt>Monthly fee:
      <dd>$100
    </div>
    <div>
      <dt>Yearly fee:
      <dd>$800
    </div>
  </dl>
</div>
  
<div class=service1>
  <h1>Level 2</h1>
  <div class=image>
    <a href=signup.php>
      <h2 id=violin>🎻</h2>
    </a>
  </div>
  <p>Purchase the Level 2 Subscription plan!<br><br>
    Learn how to play the piano right from the comfort of your own home!
  <dl>
    <div>
      <dt>Monthly fee:
      <dd>$150
    </div>
    <div>
      <dt>Yearly fee:
      <dd>$1300
    </div>
  </dl>
</div>
    
<div class=service1>
  <h1>Level 3</h1>
  <div class=image>
    <a href=signup.php>
      <h2 id=sax>🎷</h2>
    </a>
  </div>
  <p>Purchase the Level 3 Subscription plan!<br><br>
    Learn how to play the piano right from the comfort of your own home!
  <dl>
    <div>
      <dt>Monthly fee:
      <dd>$200
    </div>
    <div>
      <dt>Yearly fee:
      <dd>$1800
    </div>
  </dl>
</div>