[ 解決済 ] ボタンのマウスホバー時のカラー変更について

Lightning のご利用誠にありがとうございます。株式会社ベクトルの平川です。

①ボタンでマウスホバーした際に、現状だと赤色が反映します。この赤を他の色に変更したい
このCSSを入れてみましたが、変化ありませんでした

/* 通常時の背景色 */
.selector {
background-color: #b1eeff;;
}
/* マウスオーバー時の背景色 */
.selector:hover {
background-color: #ffc9d7;
}

下記 CSS を適用すればうまくいくと思います。

selector .wp-block-button__link {
background-color: #b1eeff!important;
}

selector .wp-block-button__link:hover {
background-color: #ffc9d7!important;
}

ちなみに通常色は画像の赤枠の部分で変更可能です。

②カラムの幅を変更したら、ヘッダーの幅も小さくなってしまい、ヘッダーにずれが生じている
現状のCSSです。これだとヘッダーも小さくなってしまうようです…

/*ブログのカラム幅広くする */
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 800px;
}
}

弊社のテーマではヘッダーの内部とコンテンツエリアをとフッター内部に至るまで
左右の端が揃うように設計されております。

コンテンツエリアのみ狭めたいということであれば下記 CSS を適用してみてください。

/*ブログのカラム幅広くする */
@media (min-width: 992px) {
	.mainSection-col-one {
		max-width: 960px;
	}
}
@media (min-width: 1200px) {
	.mainSection-col-one {
		max-width: 800px;
	}
}

CSS のカスタマイズについては下記で解説していますので是非ご覧になてください。

できる！CSSカスタマイズ

以上よろしくお願いします。

お世話になります。株式会社ベクトルの平川です。

②いただいたCSSを反映したところ、ヘッダーは小さくならずできたのですがコンテンツエリア内ですべて左によってしまい上手くいきませんでした…
コンテンツエリアの修正をフォーラムで探しましたが分からず…こちらの修正を教えていただくことは可能でしょうか？
前回のURLのページが、左に寄っている状態のテストページになっています。

下記でいかがでしょうか？

/*ブログのカラム幅広くする */
.mainSection-col-one {
	    margin: 0 auto;
}
@media (min-width: 992px) {
	.mainSection-col-one {
		max-width: 960px;

	}
}
@media (min-width: 1200px) {
	.mainSection-col-one {
		max-width: 800px;
	}
}

本件については「CSS 左右　中央揃え」あたりで検索すれば出てきますのでぜひお試しください。