How to display outside of the container my current img?-CodePudding

So here is the reffernce that I have, and my current html,css code bellow enter image description here Here is the current IMG enter image description here

How it looks like this current work

HTML

<body>
    <div >
        <img src="image-removebg-preview(563).png" alt="#">
        <div >
            <h1>I’m Amy, and I’d love to work on your next project</h1>
            <p>I love working with others to create beautiful design solutions. I’ve designed      everything from brand illustrations to complete mobile apps. I’m also handy with a camera!</p>
            <button>Free Consultation</button>
        </div>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

h1 {
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
}

.wrap {
  display: flex;
  width: 690px;
  margin: 5vh auto auto auto;
  background-color: rgb(255, 196, 255);
  position: relative;
}
.wrap img {
  width: 364px;
  height: auto;
}
.wrap .content {
  display: flex;
  max-width: 339px;
}
.wrap .content p {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  padding: 24px 0 24px 0;
}
.wrap .content button {
  width: 228px;
  height: 56px;
  border: none;
  border-radius: 26px;
  background-color: orange;
  color: white;
  font-size: 16px;
}

Maybe I need to use position absolute for img? Or some stuff with overflow? I need you're help guys!

CodePudding user response：

<style>


* {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }

body{
  display:flex;
  justify-content:center;
  align-items:center;
}
.main-wrapper{
  overflow:hidden;
  padding:0px 20px;
}
h1 {
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
}
.wrap {
  display: flex;
  width: 800px;
  justify-content:center;
  align-items:center;
  padding: 2em 1em;
  background-color: rgb(255, 196, 255);
  position: relative;
}
.image-wrapper{
  width:100%;
  max-width:380px;
  position:relative;
  left:-100px;
}
.wrap img {
width:100%;  
}
.wrap .content {
  display: flex;
  flex-direction:column;
  max-width: 339px;
}
.wrap .content p {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  padding: 24px 0 24px 0;
}
.wrap .content button {
  width: 228px;
  height: 56px;
  border: none;
  border-radius: 26px;
  background-color: orange;
  color: white;
  font-size: 16px;
}
  </style>

<div >
   <div >
     <div >
      <img src="https://cdn.shopify.com/s/files/1/0657/2444/9001/files/rUTWz.png?v=1673622119" alt="#">
     </div>
    <div >
      <h1>I’m Amy, and I’d love to work on your next project</h1>
      <p>I love working with others to create beautiful design solutions. I’ve designed everything from brand illustrations to complete mobile apps. I’m also handy with a camera!</p>
      <button>Free Consultation</button>
    </div>
  </div>
</div>