# Css issue in my finished Survey form project

**URL:** <https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744>\
**Category:** I Built This\
**Created:** [May 14, 2020, 1:42pm UTC](https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744 "2020-05-14T13:42:04Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![baha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/baha/32/142730_2.png) [@baha](https://forum.freecodecamp.org/u/baha)\
**Post date:** [May 14, 2020, 1:42pm UTC](https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744/1 "2020-05-14T13:42:05Z")

</div>

Hello there guys!

I would really love any feedback on my survey form page:

> **[qBOajbP](https://codepen.io/bahax/full/qBOajbP)**
>
> ...

But mainly I have an issue that’s bothering me, that I’m setting the width of input boxes to 100% with:

```auto
.form-item .square-input {
  width: 100%;
  padding: 6px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

```

But they don’t seem to take up the whole available width, if I remove the `display: flex` from the parent container they do, so I’m suspecting that the labels have to do something with this.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![cyishere](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cyishere/32/145086_2.png) [@cyishere](https://forum.freecodecamp.org/u/cyishere)\
**Post date:** [May 14, 2020, 2:06pm UTC](https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744/2 "2020-05-14T14:06:31Z")

</div>

I used the Dev tool in chrome and found out the width of input.square-input is wider than form#survey-form because of the padding setting. (The width of form#survey isn’t fulfill the width.) If you set “overflow: hidden;” on form#survey-form, those inputs would be cut off. Maybe because of the default input width setting of browsers.

I think maybe give a width to the form#survey-form or use reset, normalize.css could solve it.

---

<div class="post-metadata">

**Author:** ![baha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/baha/32/142730_2.png) [@baha](https://forum.freecodecamp.org/u/baha)\
**Post date:** [May 14, 2020, 2:22pm UTC](https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744/3 "2020-05-14T14:22:46Z")

</div>

Thanks for your reply @cyishere, actually as I said when I remove the `display: flex` from the parent container (div with class=“content”) the issue of the full width is resolved, and I’m not sure why I’m making the display flex in the parent container, because it’s not giving me benefit so I’ll remove it.

---

<div class="post-metadata">

**Author:** ![baha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/baha/32/142730_2.png) [@baha](https://forum.freecodecamp.org/u/baha)\
**Post date:** [May 14, 2020, 2:26pm UTC](https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744/4 "2020-05-14T14:26:14Z")

</div>

Now my main issue is that the `<select>` tag is not taking full width as the input elements, and the button is taking the same width as the `<select>` tag, do you guys have any idea why?

---

<div class="post-metadata">

**Author:** ![baha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/baha/32/142730_2.png) [@baha](https://forum.freecodecamp.org/u/baha)\
**Post date:** [May 14, 2020, 2:28pm UTC](https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744/5 "2020-05-14T14:28:12Z")

</div>

I tried giving `width: 100%` to `#survey-form` but nothing changed.

---

<div class="post-metadata">

**Author:** ![baha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/baha/32/142730_2.png) [@baha](https://forum.freecodecamp.org/u/baha)\
**Post date:** [May 14, 2020, 2:36pm UTC](https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744/6 "2020-05-14T14:36:18Z")

</div>

As @cyishere noted, I notice that the form element doesn’t take the full width of the div.content and the `<select>` tag and the Submit button are taking the width of the form element. why is that?

---

<div class="post-metadata">

**Author:** ![baha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/baha/32/142730_2.png) [@baha](https://forum.freecodecamp.org/u/baha)\
**Post date:** [May 14, 2020, 2:41pm UTC](https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744/7 "2020-05-14T14:41:41Z")

</div>

I’ve just noticed that I’ve added a padding of 2.5rem to the `div.content` element that contains the form, so the form was behaving correctly but turned out the `.form-item .square-input` divs were incorrect and they are going out of bound.

---

<div class="post-metadata">

**Author:** ![baha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/baha/32/142730_2.png) [@baha](https://forum.freecodecamp.org/u/baha)\
**Post date:** [May 14, 2020, 2:45pm UTC](https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744/8 "2020-05-14T14:45:41Z")

</div>

The items had padding of `6px 12px;` which caused them to get out of bound! after removing the padding they returned to be contained in the form space, I’m not sure yet how I’ll handle this.

---

<div class="post-metadata">

**Author:** ![baha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/baha/32/142730_2.png) [@baha](https://forum.freecodecamp.org/u/baha)\
**Post date:** [May 14, 2020, 2:52pm UTC](https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744/9 "2020-05-14T14:52:28Z")

</div>

In the sample project, he uses padding with the input fields and sets their width to 100% and the out of bound doesn’t happen, why?

---

<div class="post-metadata">

**Author:** ![baha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/baha/32/142730_2.png) [@baha](https://forum.freecodecamp.org/u/baha)\
**Post date:** [May 14, 2020, 3:04pm UTC](https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744/10 "2020-05-14T15:04:42Z")

</div>

I think I found the info I need in these links:

> <https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100>

> <https://stackoverflow.com/questions/2225585/how-to-change-a-div-padding-without-affecting-the-width-height>

I added

```auto
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */

```

to the css where I’m setting the width and padding and it worked!

---

<div class="post-metadata">

**Author:** ![baha](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/baha/32/142730_2.png) [@baha](https://forum.freecodecamp.org/u/baha)\
**Post date:** [May 14, 2020, 3:18pm UTC](https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744/11 "2020-05-14T15:18:05Z")

</div>

Everything is great now, I have only one question, why when I add `display: flex` to the container, there becomes an empty space in the right inside of it! But maybe I’ll find out in later projects. Cheers!

---

<div class="post-metadata">

**Author:** ![cyishere](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cyishere/32/145086_2.png) [@cyishere](https://forum.freecodecamp.org/u/cyishere)\
**Post date:** [May 15, 2020, 1:10am UTC](https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744/12 "2020-05-15T01:10:27Z")

</div>

Glad you solve it, cheers! box-sizing is really a tricky one.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 1:19pm UTC](https://forum.freecodecamp.org/t/css-issue-in-my-finished-survey-form-project/388744/14 "2021-06-01T13:19:04Z")

</div>