CSS Right Align Wont Work

I have been trying for a while to get my button to center and I just can not get it to center. And I’m not exactly sure why. The only way I can get it to the center is by manually putting in margins but I would like to just be able to put align right and that work.

The link to the website is http://caitswebdesign.com which is not yet done lol.

      <a id="downloadLink" href="myresume.pdf" target="_blank" type="application/octet-stream"
        download="myresume.pdf"  class="about-button">Check Out My Resume</a>

My CSS I don’t know if you need to see all the CSS to find the problem.

/* About Me Section */
.about h1{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 50px;
  margin bottom: 130px;
  margin-right: 120px;
  margin-left: 120px;
}

.about p {
  text-align: center;
  letter-spacing: 3px;
  font-size: 20px;
  margin-top: 30px;
  margin bottom: 130px;
  margin-right: 120px;
  margin-left: 120px;
}

.about-button {
    border: 1px solid #ffbac1;
    text-transform: uppercase;
     margin: 0 auto;
    text-decoration: none;
    color: #ffbac1;
    margin-top: 30px;
    border-radius: 20px;
    padding: 10px 20px;
    text-align: center;

  }

.about-button:hover{

  background: #ffbac1;
  color: white;
  text-transform: uppercase;
}

auto side margins don’t work on inline elements, which <a> is by default. Use CSS to change that element to have display block;

Also, once you do this then you’ll have to set the width on the <a> so it doesn’t stretch across the entire page.

1 Like

I’m not sure, but have you tried with align-item: center property?

So I did that and it did center but when I put the width it still went all the way to left and didn’t center. I’m sure I’m making some kind of mistake this is my first html website so I’m still learning haha! Thank you for your help!!

a {
  display: block;
}

.about-button {
    border: 1px solid #ffbac1;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffbac1;
    margin-top: 30px;
    border-radius: 20px;
    padding: 10px 20px;
    text-align: center;

  }

Considering you are already using text-align: center on all the other elements inside the .about parent, I would just set text-align: center on the parent and make the button display: inline-block. You can remove all the text-align properties from the child elements as well then.

Edit: BTW, your margin-bottom on the h1 and p selectors are missing the - (you have margin bottom it should be margin-bottom).

The CSS just in case this isn't clear:
.about {
  text-align: center;
}

.about h1 {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 50px;
  margin-bottom: 130px;
  margin-right: 120px;
  margin-left: 120px;
}

.about p {
  letter-spacing: 3px;
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 130px;
  margin-right: 120px;
  margin-left: 120px;
}

.about-button {
  display: inline-block;
  border: 1px solid #ffbac1;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffbac1;
  margin-top: 30px;
  border-radius: 20px;
  padding: 10px 20px;
}

Well, now I’m seeing that you are floating it to the left which is not what you want to do if you want it centered. Also, you have removed the auto margins for the sides.

I would assume that they intended to remove that property considering it is not in the CSS posted here. But yes, you can’t also float the button to the left obviously.

If you want everything in that About Me section to be centered, you could add

display: flex;
flex-direction: column;
align-items: center;

to the rule for your about class (.about) and then remove all of the text-aligns and margins on the child elements.

Thank you that worked!