\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [August 31, 2021, 10:04am UTC](https://community.hubspot.com/t/problem-with-styling-html-form-width-and-margin/43146 "2021-08-31T10:04:29Z")\
**Posts on this page:** 7\
**Page:** 1
**Author:**  [@vPhilipp](https://community.hubspot.com/u/vPhilipp)\
**Post date:** [August 31, 2021, 10:04am UTC](https://community.hubspot.com/t/problem-with-styling-html-form-width-and-margin/43146/1 "2021-08-31T10:04:29Z")
Hey there,
I’m again in the process of styling an HTML Raw Hubspot form and have a problem with the width and margin.
I got a Design from our designer looking like this:
It seems that there is some automatic margin or something like this in the Hubspot code, because when I try to recreate it (currently doing this with codepen) I get the following result:
The width of the form is 432px and the space between the two middle fields should be 24px.
My code currently looks like this and I don’t know what I’m doing wrong:
```lia-code-sample
.hs-form input {
box-sizing: border-box;
height: 42px;
width: 432px;
border: 1px solid #6928C6;
border-radius: 6px;
color: #383A3B;
background-color: #F7F4FC;
margin-bottom: 20px;
}
.hs-form .hs-firstname input{
width: 204px;
margin-right: 24px;
}
.hs-form .hs-lastname input {
width: 204px;
}
.hs-form .hs-email input {
width: 204px;
margin-right: 24px;
}
.hs-form .hs-phone input {
width: 204px;
}
.hbspt-form {
box-sizing: border-box;
color: #383A3B;
font-family: Lato;
font-size: 14px;
letter-spacing: 0.47px;
line-height: 25px;
width: 432px;
}
.hs-form textarea {
height: 80px;
width: 432px;
border: 1px solid #6928C6;
border-radius: 6px;
color: #383A3B;
background-color: #F7F4FC;
}
.hs-button.primary.large {
color: #6928C6;
background-color: #ffffff;
font-family: Lato;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.47px;
line-height: 17px;
text-align: center;
height: 35px;
width: 220px;
border: 1px solid #6928C6;
border-radius: 6px;
}
.hs-button.primary.large:hover {
background-color:#6928C6;
color:#FFFFFF;
border:solid 1px #FFFFFF;
}
```
I hope somebody can point me in the right direction! Thanks in advance!
Philipp
---
**Author:**  [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [August 31, 2021, 10:17am UTC](https://community.hubspot.com/t/problem-with-styling-html-form-width-and-margin/43146/2 "2021-08-31T10:17:04Z")
Hi @vPhilipp ,
We use the following code to fix the above issue:
```lia-code-sample
.hs-form .form-columns-0 .input,
.hs-form .form-columns-1 .input,
.hs-form .form-columns-2 .input {
margin-right: 0 !important;
}
.hs-form .form-columns-2 .hs-form-field {
width: calc(100% / 2 - 0.5rem) !important;
float: left;
}
@media screen and (max-width: 620px) {
.hs-form .form-columns-2 .hs-form-field {
width: 100% !important;
}
}
.hs-form .form-columns-2 .hs-form-field:last-child {
float: right !important;
}
```
---
**Author:**  [@vPhilipp](https://community.hubspot.com/u/vPhilipp)\
**Post date:** [September 1, 2021, 6:13am UTC](https://community.hubspot.com/t/problem-with-styling-html-form-width-and-margin/43146/3 "2021-09-01T06:13:27Z")
Hey @Teun
now my form looks like this with your code:
I’ve deleted all width sections from my previous code, but I still can’t get it to work right, sadly.
You can take a look at my Codepen here: [https://codepen.io/pr1mus/pen/poPKBLo](https://codepen.io/pr1mus/pen/poPKBLo)
---
**Author:**  [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [September 1, 2021, 7:01am UTC](https://community.hubspot.com/t/problem-with-styling-html-form-width-and-margin/43146/4 "2021-09-01T07:01:20Z")
Hi @vPhilipp ,
I forgot a small part, I rewrote your CSS. The following should work:
```lia-code-sample
.hs-form .form-columns-0 .input,
.hs-form .form-columns-1 .input,
.hs-form .form-columns-2 .input {
margin-right: 0 !important;
}
.hs-form .hs-input {
width: 100% !important;
}
.hs-form .form-columns-2 .hs-form-field {
width: calc(100% / 2 - 0.5rem) !important;
float: left;
}
@media screen and (max-width: 620px) {
.hs-form .form-columns-2 .hs-form-field {
width: 100% !important;
}
.hs-form .hs-input {
width: 100% !important;
}
}
.hs-form .form-columns-2 .hs-form-field:last-child {
float: right !important;
}
.hs-form input {
border: 1px solid #6928c6;
border-radius: 6px;
height: 42px;
color: #383a3b;
background-color: #f7f4fc;
margin-bottom: 20px;
}
.hbspt-form {
color: #383a3b;
font-family: Lato;
font-size: 14px;
letter-spacing: 0.47px;
line-height: 25px;
}
.hs-form textarea {
height: 80px;
border: 1px solid #6928c6;
border-radius: 6px;
color: #383a3b;
background-color: #f7f4fc;
}
.hs-button.primary.large {
color: #6928c6;
background-color: #ffffff;
font-family: Lato;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.47px;
line-height: 17px;
text-align: center;
height: 35px;
width: 220px;
border: 1px solid #6928c6;
border-radius: 6px;
}
.hs-button.primary.large:hover {
background-color: #6928c6;
color: #ffffff;
border: solid 1px #ffffff;
}
```
The width between the two fields is defined with (- 0.5rem)
`width: calc(100% / 2 - 0.5rem) !important;`
---
**Author:**  [@vPhilipp](https://community.hubspot.com/u/vPhilipp)\
**Post date:** [September 1, 2021, 7:07am UTC](https://community.hubspot.com/t/problem-with-styling-html-form-width-and-margin/43146/5 "2021-09-01T07:07:46Z")
This worked great! Thank you a lot!
---
**Author:**  [@vPhilipp](https://community.hubspot.com/u/vPhilipp)\
**Post date:** [August 31, 2021, 10:22am UTC](https://community.hubspot.com/t/problem-with-styling-html-form-width-and-margin/43146/6 "2021-08-31T10:22:11Z")
Hey @Teun ,
thanks for your answer. I’ll take a look at it. I’ve to rewrite my code for that to work I think.
I’ll message back in a bit to see if it worked.
---
**Author:**  [@EBricenoLeone](https://community.hubspot.com/u/EBricenoLeone)\
**Post date:** [April 24, 2023, 4:56pm UTC](https://community.hubspot.com/t/problem-with-styling-html-form-width-and-margin/43146/7 "2023-04-24T16:56:59Z")
Hi, I got the same problem, but I don’t have the skill to write in HTML.
Look what’s going on with the margins on the Mobile.
Here’s my ugly code
\