お世話になっております。

cssで丸要素をはみ出させる事に苦戦しております。
マイナスマージンを使ってはみ出す事はできましたが、大枠にくくっている背景色まで
くっついてきます。

これだと理論的にだめな書き方な事も分かってはいるのですが、
丸要素だけ大枠から切り離して書く書き方が分からず苦戦しております。
z-indexで丸要素だけ一番上にしても背景色がくっついてくるので駄目でした。
ご助言いただけますと幸いです。

pug
1    .worryBlock
2      .contentsInner
3       p 上の黄色要素です。省略
4    .solutionBlock
5      .article
6        .circleBox
7          .blue
8            p 気軽に#[br]相談したい
9          .blue
10            p なにかと#[br]不安
11          .blue
12            p 時間が#[br]ない

sass
1.solutionBlock
2	background: $gray
3	.contentsInner
4		position: relative
5	.article
6		margin: -40px auto 0
7		max-width: 1100px
8		padding: 0 8vw
9		.circleBox
10			display: flex
11			justify-content: center
12			.blue
13				width: 204px
14				height: 204px
15				border-radius: 50%
16				box-sizing: border-box
17				background-color: #63B5D3
18				border: 8px solid rgba(255,255,255,.5)
19				margin: 0 30px
20				p
21					margin: auto !important
22					text-align: center
23					color: $white
24					font-size: 28pt
25					font-weight: 700
26					line-height: 1.4
27					padding-top: 53px
28

行動規範の内容に同意します

回答1件

ベストアンサー

サンプル

sass
1.solutionBlock
2    background: $gray
3    .contentsInner
4        position: relative
5    .article
6        //margin: -40px auto 0 削除
7        max-width: 1100px
8        padding: 0 8vw
9        border: 1px solid $gray // 追加
10        .circleBox
11            margin: -40px auto 0 // 追加
12            display: flex
13            justify-content: center

（サンプルでは変数を壊してます）

参考：
マージンの相殺 - CSS: カスケーディングスタイルシート | MDN

追記

こっちの方がいいですね……
サンプル

sass
1.solutionBlock
2    background: $gray
3    .contentsInner
4        position: relative
5    .article
6        //margin: -40px auto 0 削除
7        max-width: 1100px
8        padding: 0 8vw
9        display: flow-root // 追加
10        .circleBox
11            margin: -40px auto 0 // 追加
12            display: flex
13            justify-content: center