CSS not showing up properly, Please help!

[SamiBaydani]

Hi everyone!

Could someone please help me figure out what I’m doing wrong here? I’m trying to implement the left CSS design but it keeps showing up as the right image.

My CSS:

:root {
	 background: #ffffff;
	 color: #000000;
	 font: 1rem Helvetica Neue, HelveticaNeue-Light, Helvetica Neue Light, Helvetica,  Arial, Lucida Grande, sans-serif, sans-serif;
  
 }
 html, body, .contain{
	 height: 100%;
   
}
 a {
	 color: inherit;
}
 a:hover {
	 color: #7f8ff4;
}
 .contain {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
   
}
 .btn {
	 display: inline-block;
	 background: transparent;
	 color: inherit;
	 font: inherit;
	 border: 2 ;
	 outline: 0;
	 padding: 0;
	 transition: all 200ms ease-in;
	 cursor: pointer;
}
 .btn--primary {
	 background: #000000;
	 color: #fff;
	 box-shadow: 0 0 10px 2px rgba(0, 0, 0, .1);
	 border-radius: 999999px;
	 padding: 12px 36px;
   
}
 .btn--primary:hover {
	 background: #6c7ff2;
}
 .btn--primary:active {
	 background: #7f8ff4;
	 box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, .2);
}
 .btn--inside {
	 margin-left: -186px;
   
}
 .form__field {
	 width: 498px;
	 background: #fff;
	 color: #a3a3a3;
	 font: inherit;
	 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .1);
	 border: 1;
	 outline: 0;
	 padding: 22px 18px;
   border-radius: 999999px;
}

[PremierStores]

Hi, Sami:

You can use these rules but for the mobile view, you will need to adjust it.

button.btn.btn--primary.btn--inside.uppercase {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

input.form__field {
    padding-right: 180px;
}

form.form {
    position: relative;
}

[SamiBaydani]

This worked!! Big thank you, @PremierStores !!

I’ve tried making it responsive for Mobile with this CSS below but it’s not working. I’ve also tried width: auto, but it’s messing up the container. What am I doing wrong here?? Or would you recommend making a mobile only section with adjusted CSS?

@PremierStores

Hi, Sami:

You can use these rules but for the mobile view, you will need to adjust it.

button.btn.btn--primary.btn--inside.uppercase {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

input.form__field {
    padding-right: 180px;
}

form.form {
    position: relative;
}

---

@media (min-width: 1200px) {
  form_field-2,
  btn--inside-2 {
    font-size: calc(var(--max-font) * 1px);
  }
}

@media (max-width: 420px) {
  form_field-2,
  btn--inside-2 {
    font-size: calc(var(--min-font) * 1px);