So richten Sie Bild und Formular nebeneinander aus und es sollte auch in verschiedenen Ansichten wie mobiler Ansicht und Desktop perfekt ausgerichtet sein

<div class="box"> 
 <p>contact us</p> 
<form>
 <div>
 <input type="text" name="" required=""> 
 <label>firstname</label>
 </div>
 <div>
 <input type="text" name="" required=""> 
 <label>last name</label>
 </div>
 <div>
 <input type="text" name="" required=""> 
 <label>mail</label>
 </div>
 <div class="button">
 <button type="button">submit <span>&#10230;</span></button>
</div>
</form>
</div>
<div class="clearfix">
 <img src="https://www.fnordware.com/superpng/pnggrad8rgb.png" >
</div>
<style>
 
img{
 float: right;
 width:40%;
 height:a;
 margin-right: 190px;
 margin-top:83px;
 height:475px;
 cursor: pointer;
 }
 span{
 content: "\27F6";
}
label{
 padding-left: 10px;
 font-size:16px;
 padding-top: 10px;
 }
.box
{
position: absolute;
top: 50%;
Left: 25%;
height:475px;
transform: translate(-50%, -50%);
background:green;
padding: 40px;
box-sizing: border-box; 
margin-left:1%;
cursor: pointer;
}
.box p
{
font-family: 'jmsans', sans-serif;
padding: 0;
margin: 0 0 40px; 
color: white;
font-size: 40px;
width: 467px;
}
.box input
{
margin-bottom: 30px;
width:466px;
box-sizing: border-box;
box-shadow: none;
border: none; 
border-bottom: 2px solid #999;
outline: none;
padding-left: 10px;
font-weight: bold;
height: 56px;
}
.box input[type="submit"]
{
border-bottom: none; 
cursor: pointer;
color: #fff;
margin-bottom: 0;
}
.box form div
{
position: relative;
}
.box form div label
{
position: absolute; 
top: 10px;
Left: 0; 
color: #999; 
transition:.5s; 
pointer-events: none;
}
</style>

Wenn ich den Code inspiziere und seine Reaktionsfähigkeit in verschiedenen Ansichten (mobil und Desktop) überprüfe, sind Bild und Formular aufgrund von fehlerhaftem Code nicht ausgerichtet, wie dieses Problem behoben werden kann. Wenn ich den Code inspiziere und seine Reaktionsfähigkeit in verschiedenen Ansichten (mobil und Desktop) überprüfe und das Formular ist aufgrund von fehlerhaftem Code nicht ausgerichtet, wie dieses Problem behoben werden kann

Lösung des Problems

Sie haben Ihren primären boxContainer auf position: absoluteund mehrere Positionierungsattribute eingestellt, die auf dem Bild nicht vorhanden sind, weshalb sich wahrscheinlich alles verschiebt. Ich weiß nicht, in was dieses Formular und dieses Bild sonst noch eingefügt werden sollen, aber sie scheinen in Ihrem Beispiel nicht notwendig zu sein, also habe ich sie entfernt und eine Flexbox hinzugefügt .flexContainer, um Ihren Inhalt darin einzuschließen, und das hilft, Ihren Inhalt auszurichten eine einzelne Reihe. Sie könnten noch einen Schritt weiter gehen und eine @mediaAbfrage ( https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries ) hinzufügen, um zu steuern, wie das Bild auf Mobilgeräten reagiert (z Daher erscheint flex-directiondas columnBild auf kleineren Bildschirmen unter dem Kontaktfeld, anstatt sich nach innen zu strecken. `

.flexContainer {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
}
img {
 width: 100%;
 height: auto;
 height: 475px;
 cursor: pointer;
}
span {
 content: "\27F6";
}
label {
 padding-left: 10px;
 font-size: 16px;
 padding-top: 10px;
}
.box {
 height: 475px;
 background: green;
 padding: 40px;
 box-sizing: border-box;
 margin-left: 1%;
 cursor: pointer;
}
.box p {
 font-family: 'jmsans', sans-serif;
 padding: 0;
 margin: 0 0 40px;
 color: white;
 font-size: 40px;
 width: 467px;
}
.box input {
 margin-bottom: 30px;
 width: 466px;
 box-sizing: border-box;
 box-shadow: none;
 border: none;
 border-bottom: 2px solid #999;
 outline: none;
 padding-left: 10px;
 font-weight: bold;
 height: 56px;
}
.box input[type="submit"] {
 border-bottom: none;
 cursor: pointer;
 color: #fff;
 margin-bottom: 0;
}
.box form div {
 position: relative;
}
.box form div label {
 position: absolute;
 top: 10px;
 left: 0;
 color: #999;
 transition: 0.5s;
 pointer-events: none;
}

<div class="flexContainer">
 <div class="box">
 <p>contact us</p>
 <form>
 <div>
 <input type="text" name="" required="">
 <label>firstname</label>
 </div>
 <div>
 <input type="text" name="" required="">
 <label>last name</label>
 </div>
 <div>
 <input type="text" name="" required="">
 <label>mail</label>
 </div>
 <div class="button">
 <button type="button">submit <span>&#10230;</span></button>
 </div>
 </form>
 </div>
 <div>
 <img src="https://www.fnordware.com/superpng/pnggrad8rgb.png">
 </div>
</div>