Blocks created via code change position once page is released

Site URL: https://www.jcatny.com/manga-artists

I created blocks with HTML and CSS. At first it seemed working well, but when I released the page, the blocks' positions is not the same with the edit page. The position collapse..

Does anyone help me with this?

HTML

<p><div class="maste">
<span class="tape">SUPPORT 1</span>

<fieldset style="background:#EECD77;
                 border-radius:10px;
                 font-size: 100%;
                 padding: 15px;
                 text-align:center
                 ">
 <fieldset style="background:#00000;
                 border-radius:10px;
                 font-size: 130%;
                 padding: 15px;
                 text-align:center
                 "><span style="color:#00000;">
   <B style="color:#000000">オンラインで作品販売サポート</B></span>
<fieldset style="background:#00000;
                 border-radius:10px;
                 font-size: 70%;
                 padding: 12px;
                 text-align: center
                 "><span style="color:#00000;">
<br>毎月１度開催の“JCAT Gallery”では、SOLO展及びグループ展を開催しています。展示会での作品掲示では、作品を気に入ったファンが直接購入することができます。

</span>

CSS

<style>

.maste {
  position: relative;
  background-color: #EECD77;
  box-shadow: 0px 2px 0px 0px #D4D4D4;
  background-size: 80px 80px;
  padding: 1em;
}
.tape{
  position: absolute;
  top: -0.75em;
  background-color: rgba(255,255,255,.4);
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,0.2);
  padding: 0.25em 2em;
  color: #65513f;
  transform: rotate(-3deg);
}
.maste p {
  color: #65513f;
  padding: 15px 10px 10px 10px;
}
</style>

8 minutes ago, Pero said:

Site URL: https://www.jcatny.com/manga-artists

I created blocks with HTML and CSS. At first it seemed working well, but when I released the page, the blocks' positions is not the same with the edit page. The position collapse..

Does anyone help me with this?

HTML

<p><div class="maste">
<span class="tape">SUPPORT 1</span>

<fieldset style="background:#EECD77;
                 border-radius:10px;
                 font-size: 100%;
                 padding: 15px;
                 text-align:center
                 ">
 <fieldset style="background:#00000;
                 border-radius:10px;
                 font-size: 130%;
                 padding: 15px;
                 text-align:center
                 "><span style="color:#00000;">
   <B style="color:#000000">オンラインで作品販売サポート</B></span>
<fieldset style="background:#00000;
                 border-radius:10px;
                 font-size: 70%;
                 padding: 12px;
                 text-align: center
                 "><span style="color:#00000;">
<br>毎月１度開催の“JCAT Gallery”では、SOLO展及びグループ展を開催しています。展示会での作品掲示では、作品を気に入ったファンが直接購入することができます。

</span>

 

CSS

<style>

.maste {
  position: relative;
  background-color: #EECD77;
  box-shadow: 0px 2px 0px 0px #D4D4D4;
  background-size: 80px 80px;
  padding: 1em;
}
.tape{
  position: absolute;
  top: -0.75em;
  background-color: rgba(255,255,255,.4);
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,0.2);
  padding: 0.25em 2em;
  color: #65513f;
  transform: rotate(-3deg);
}
.maste p {
  color: #65513f;
  padding: 15px 10px 10px 10px;
}
</style>

Are you mentioning these blocks, what's the problem on editor mode

Yes, that's right!

@bangank36

26 minutes ago, Pero said:

@bangank36

You can try adding to Home > Design > Custom Css to align your items

#block-a3684d89ed8b801cd499 + .row .sqs-col-8 {
  width: 100%;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

My testing result

It worked! Thank you so much, @bangank36!!!