How to indent/center texts of different classes on the same line through CSS?

Question

so I have three recipes that I am doing for a project: "Bruschetta" "Italian Meatball" & "Seafood Risotto."

I put them on different classes in CSS as I thought that would make them easier to manage, but it has not really worked out.

I added indents on the the first and the last recipes "Bruschetta" and "Seafood Risotto" because I feel like the receipes are way too close together on the webpage, but it does not seem to work. However, when I change the text's color via those same classes that I made it does work, so I am not sure what the issue is.

Also, all three recipes seem to be not centered, while the title is centered, which is also throwing off the appearance of the page.

I was able to sort of fix this messing around with " " on the HTML code, but it still looks sloppy, and is probably not the most efficient way to do this. However, it may be that I may have to edit the HTML file to get a good result.

Thank you in advance

h1 {
text-align: center;
font-size: 32px;
color: black;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida 
Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bolder;
/*background: -webkit-linear-gradient(left, color: 008C45, 
color: F4F9FF, color: CD212A);*/
}
p {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}

.bs {
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: #008C45;
  text-align: left;
}

.im {
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: #F4F9FF;
  text-align: center;
}

.sr {
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: #CD212A;
  text-align: right;
}

<h1>Recipes</h1>
<p>
  <a href="./recipes/bruschetta.html" class="bs">Bruschetta</a>
  <a href="./recipes/italianmeatballs.html" class="im">Italian Meatballs</a>
  <a href="./recipes/seafoodrisotto.html" class="sr">Seafood Risotto</a>
</p>

Answer 1

I have changed your HTML structure and CSS styles a little bit, as I wrapped your anchor tags in a div with a class "recipes". I set this class with display flex and justify-content center (also it will work with text-align: center).

h1{
text-align: center;
font-size: 32px;
color: black;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida 
Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bolder;
/*background: -webkit-linear-gradient(left, color: 008C45, 
color: F4F9FF, color: CD212A);*/
}

.recipes{
   /*text-align: center;*/
   display: flex;
   justify-content: center;
}

.recipes a {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  padding: 0 5px;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  width: 100%;
}

.recipes .bs {
  color: #008C45;
}

.recipes .im {
  color: #F4F9FF;
}

.recipes .sr {
  color: #CD212A;
}

<h1>Recipes</h1>
<div class="recipes">
  <a href="./recipes/bruschetta.html" class="bs">Bruschetta</a>
  <a href="./recipes/italianmeatballs.html" class="im">Italian Meatballs</a>
  <a href="./recipes/seafoodrisotto.html" class="sr">Seafood Risotto</a>
 </div>