.contentInnerとその中身を画像の上に浮かせます
filename.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><linkrel="stylesheet"href="style.css"></head><body><header><divclass="headerInner"><divclass="headerLeft"><imgsrc="./img/"alt="logo"></div><nav><ul><li><ahref="">HOME</a></li><li><ahref="">CONTENT</a></li><li><ahref="">CONTACT</a></li></ul></nav></div></header><divclass="contentInner"><h2>h2_title</h2><sectionclass="top"><divclass="leftContents"><h3class="h3_title">h3_title</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ea obcaecati laborum ad deleniti fugiat dolor ut, nemo recusandae illum possimus, enim soluta magnam iste at magni nam. Alias, voluptate?
</p></div><imgsrc="./img/IMG_0671.JPG"alt=""></section><sectionclass="center reverse"><divclass="leftContents"><h3class="h3_title">h3_title</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, asperiores exercitationem! Rem alias assumenda eaque mollitia accusamus aliquid hic excepturi? Labore veniam iste neque eaque id quod adipisci vel libero.
</p></div><imgsrc="./img/IMG_0671.JPG"alt=""></section><sectionclass="top"><divclass="leftContents"><h3class="h3_title">h3_title</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ea obcaecati laborum ad deleniti fugiat dolor ut, nemo recusandae illum possimus, enim soluta magnam iste at magni nam. Alias, voluptate?
</p></div><imgsrc="./img/IMG_0671.JPG"alt=""></section><sectionclass="center reverse"><divclass="leftContents"><h3class="h3_title">h3_title</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, asperiores exercitationem! Rem alias assumenda eaque mollitia accusamus aliquid hic excepturi? Labore veniam iste neque eaque id quod adipisci vel libero.
</p></div><imgsrc="./img/IMG_0671.JPG"alt=""></section><sectionclass="top"><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ea obcaecati laborum ad deleniti fugiat dolor ut, nemo recusandae illum possimus, enim soluta magnam iste at magni nam. Alias, voluptate?
</p><imgsrc="./img/IMG_0671.JPG"alt=""></section><sectionclass="center reverse"><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, asperiores exercitationem! Rem alias assumenda eaque mollitia accusamus aliquid hic excepturi? Labore veniam iste neque eaque id quod adipisci vel libero.
</p><imgsrc="./img/IMG_0671.JPG"alt=""></section></div></body></html>filename.css
*{padding:0;margin:0;}ol,ul{list-style:none;}a{cursor:pointer;color:black;text-decoration:none;}header{width:100%;background:linear-gradient(#fe3,#66ff22);position:absolute;top:0;z-index:100;}.headerInner{width:1000px;margin:0auto;display:flex;}nav{width:100%;}navul{display:flex;right:0;}navulli{width:100%;text-align:center;border-right:1pxsolidwhite;}navulli:first-child{border-left:1pxsolidwhite;}navullia{display:block;padding:20px;font-weight:bold;}navullia:hover{background:linear-gradient(green,aqua);transition:all0.8s;}body{background-image:url(./img/IMG_0007.JPG),url(./img/IMG_0830.JPG);background-repeat:no-repeat,no-repeat;background-size:100%400px,100%400px;background-position:top,0px400px,center,0px300px;}.contentInner{width:1000px;margin:130pxauto;background-color:azure;height:100%;padding:30px0;border-radius:20px;}.contentInner>section{width:900px;margin:30pxauto;background-color:palegreen;display:flex;}.reverse{flex-direction:row-reverse;}img{width:40%;}.leftContents{padding:30px;}h2,h3{text-align:center;}