背景画像を真ん中から展開したいのですが、どうすれば出来ますか？

HTML初心者です。ゴリラの画像を真ん中から展開したいのですが、左から展開して、右の余った部分にリピートが生まれてしまいます。
ど真ん中から展開させるにはどうすれば良いですか？
またヘッダーと同じ大きさに拡大してぴったり合わせるにはどうすれば良いですか？
ヘッダーやコンテンツ、フッターの大きさは1140pxで、
ゴリラの画像は960*503pxです。
余白が生まれずにぴったりとしたカバーにしたいと思ってます。
あとヘッダーが太いので細くしたいのですが、細くなりません。
何卒よろしくお願いします。

【HTML】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./css/style.css"> </head> <body> <header class="header"> <div class="navbar"> <div class="logo"> <img src="img/logo.png" alt="ZOOLOPA2"> </div> <div> <div class="global-nav"> <ul> <li><a href="#">動物</a></li> <li><a href="#">zoolopaとは</a></li> <li><a href="#">イベント</a></li> <li><a href="#">よくある質問</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> </div> </div> </header> <div class="hero"> <div class="lead"> <h1>俺に会いに来いよ</h1> <p>待ってるからさ</p> </div> </div> <div class="content"> <div class="main"> <h1>注目の動物</h1> <div class="section"> <div class="images"> <img src="img/panda.jpg" alt="パンダの画像"> </div> <div class="text"> <h2>パンダ</h2> <p>パンダはマジでかわいいよね。</p> </div> </div> <div class="section"> <div class="images"> <img src="img/zou.jpeg" alt="象の画像"> </div> <div class="text"> <h2>象</h2> <p>象はマジで大きいよね。</p> </div> </div> <div class="section"> <div class="images"> <img src="img/raion.jpeg" alt="ライオンの画像"> </div> <div class="text"> <h2>ライオン</h2> <p>ライオンはマジで凶暴よね。</p> </div> </div> </div>

    <div class=sidebar>
        <div class="pengin">
            <h1>秋のペンギン祭り</h1>
            <p>ペンギンと地獄の果てまで戯れよう！</p>
            <img src="img/pengin.jpeg" alt="ペンギンの画像">
        </div>
        <div class="fes">
            <h1>秋の大運動会</h1>
            <p>夜はクラブで大暴れしよう！</p>
            <img src="img/club.jpg" alt="クラブの画像">
            
        </div>
     </div>
</div>
<div class="footer">
    <p>フッター</p>
</div>

</body> </html> 【CSS】 .header { background-color: aquamarine; max-width: 1140px; margin: 0 auto; } .navbar { display: flex; align-items: center; margin: 0 auto; justify-content: space-between; } .logo { display: flex; align-items: center; } .global-nav a { color: red; }

.global-nav ul{
display: flex;
list-style: none;
}
.global-nav li{
margin: 1rem;
font-weight: 600;
}
.hero {
background-image: url(../img/gorira.jpeg);
background-size: contain;
min-height: 503px;
display: flex;
justify-content: center;
align-items: center;
max-width: 1140px;
margin: 0 auto;
}
.lead {
background-color: aquamarine;
color: red;
text-align: center;
}
.content {
display: flex;
max-width: 1140px;
margin: 0 auto;
background-color: pink;
}
.main {
flex: 5;
margin: 1em;
}
.sidebar {
flex: 2;
margin: 1em;
}
.main img {
width: 100%;
}
.sidebar img {
width: 80%;
}
.section {
display: flex;
}
.images {
flex: 2;
}
.text{
flex: 5;
margin: 1em;
}
.footer{
width: 1140px;
background-color: gray;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
max-width: 1140px;
margin: 0 auto;
}
.footer p {
color: aquamarine;
}

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

回答2件

ベストアンサー

ど真ん中から展開させるにはどうすれば良いですか？またヘッダーと同じ大きさに拡大してぴったり合わせるにはどうすれば良いですか？

background-size: cover; background-position: center;

あとヘッダーが太いので細くしたいのですが、細くなりません。

ul のブラウザ既定のマージンがあるのでそれを打ち消せばいいでしょう。

css
1/*前略*/
2
3.global-nav ul{
4  display: flex;
5  list-style: none;
6  margin: 0; /* 追加 */
7}
8.global-nav li{
9  margin: 1rem;
10  font-weight: 600;
11}
12.hero {
13  background-image: url(https://placehold.jp/600x400.png);
14  background-size: cover;  /* 追加 */
15  background-position: center; /* 追加 */
16  min-height: 503px;
17
18/*効力*/