問題タブ [pure-css]

私は純粋なフレームワークを使用していますが、これはページ全体をセンタリングするメカニズムを提供していないようです。次のスニペットを見つけました：

デスクトップではすべて正常に動作します が、モバイルでは奇妙に見えます: どこに問題があり、どうすれば修正できますか? これは、ページが次のように表示されないようにする方法です。

私はこのhtmlコードを持っています:

私がしたいのは、純粋なcssを使用してメイン画像の背景またはsrcを変更することです。srcを変更できないことはわかっていますが、サムネイルのホバーで大きな画像を変更できる方法はありますか?

ありがとう！

タブナビゲーションを設計したいと思います。その下にドットブレットが必要です。タブ メニューをクリックすると、アクティブなメニューの下に矢印が表示されます。上の画像は私のコンセプトを説明しています。利用可能な 2 つのタブがあり、col-md-6 & col-md-6 形式のように中央に表示されます。