Center a border image element of a specific width (CSS)

I'm really new to CSS and just playing around. I searched in similar questions here but couldn't find quite what I was looking for.

I was looking at this tutorial on W3 and I want to add a border. Here is my current code:

<style>
    .center {
        text-align: center;
     }

    #borderimg2 { 
    border: 10px solid transparent;
    padding: 10px;
    border-image: url(https://www.w3schools.com/cssref/border.png) 35 stretch;
    }

</style>

 <div class="center">
 <p id="borderimg1" style="width: 200px"><font size="5"><b>Guides</b></font></p>
 </div>

The problem is that when I add the width element, it pulls everything (the border with the text inside) over to the left side. What I want is everything centered perfectly with the borderimage not stretching the entire width of the page.

Let me know if this doesn't make sense; I can add pictures.

Any help is appreciated! Also I'm assuming my code is sort of unorganized, so any general tips on organization or ordering would help! Thanks!

Solution

You've got the id wrong in CSS. Apart from that, use margin: 0 auto; on #borderimg1 and there you go!

.center {
  text-align: center;
}
#borderimg1 { 
  margin: 0 auto;
  border: 10px solid transparent;
  padding: 10px;
  border-image: url('https://www.w3schools.com/cssref/border.png') 35 stretch;
}

<div class="center">
  <p id="borderimg1" style="width: 200px">
    <font size="5">
      <b>Guides</b>
    </font>
  </p>
</div>

CodePen