Flexbox alignment

Question

我正在尝试使用 flexbox 对齐现代艺术画廊和文本，但是当我这样做时，整个容器会左右移动。 更重要的是，我想改变 h1 的宽度，但我不知道该怎么做。

当我在多个设备上工作时，一些代码可能会丢失，但我只需要桌面版本的帮助，这就是所显示的。

这是我想要的样子：

 .container-content { border: 2px solid blue; position: relative; display: flex; justify-content: space-between; gap: 2rem; }.container-content h1 { font-size: 96px; padding: 0; } #tablet-img { display: none; } #desktop-img { display: block; background-color: grey; padding-left: 450px; }.desktop-text-button { border: 2px solid red; position: absolute; margin-left: 1%; } }

 <div class="container-flex"> <img id="desktop-img" src="../art-gallery-website/starter-code/assets/desktop/image-hero.jpg" alt="desktop-image"> <div class="container"> <div class="container-content"> <h1>MODERN ART GALLERY</h1> <div class="desktop-text-button"> <p>The arts in the collection of the Modern Art Gallery all started from a spark of inspiration. Will these pieces inspire you? Visit us and find out.</p> <div class="button-1"> <button>Our Location</button> <span class="right-arrow"></span> </div> </div> </div> </div> </div>

Answer 1

你的代码很乱，所以我只是重新编码。 这是你想要的吗？

 .wrapper { display: flex; flex-direction: row; width: 100%; height: 90vh; }.wrapper.left { width: 70%; height: 100%; background-image: url('https://wallpaperaccess.com/full/4707236.jpg'); background-size: cover; border: 1.2px solid #000000; }.wrapper.left p { font-size: 6vw; font-weight: 700; margin-top: 15%; margin-left: 10%; color: #ffffff; }.wrapper.left p span { color: #000000; }.wrapper.right { display: flex; flex-direction: column; column-gap: 2vh; position: relative; right: 7%; width: 30%; height: 40%; margin-top: 10%; }.wrapper.right p { font-size: 2vw; }.wrapper.right button { font-size: 1.6vw; width: 45%; margin-left: auto; margin-right: auto; }

 <div class="wrapper"> <div class="left"> <p>MODERN <br /> ART GAL<span>LERY</span></p> </div> <div class="right"> <p>The arts in the collection of the Modern Art Gallery all started from a spark of inspiration. Will these pieces inspire you? Visit us and find out.</p> <button>OUR LOCATION</button> </div> </div>