# Survey Form Project - \*::after, \*::before & box-sizing: (align problem!)

**URL:** <https://forum.freecodecamp.org/t/survey-form-project-after-before-box-sizing-align-problem/411003>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [July 21, 2020, 6:51pm UTC](https://forum.freecodecamp.org/t/survey-form-project-after-before-box-sizing-align-problem/411003 "2020-07-21T18:51:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![juan.m.pais](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/juan.m.pais/32/134372_2.png) [@juan.m.pais](https://forum.freecodecamp.org/u/juan.m.pais)\
**Post date:** [July 21, 2020, 6:51pm UTC](https://forum.freecodecamp.org/t/survey-form-project-after-before-box-sizing-align-problem/411003/1 "2020-07-21T18:51:22Z")

</div>

**EDIT** : After inspecting the code from the example, i’ve found this thing in almost every element:

> \*, \*::before, \*::after { box-sizing: border-box; }

Copied that line to the top of my css sheet and suddenly all align and sizes problems are almost fixed; what kind of magic is this? have no idea of what this piece of code means or does! Can someone pls explain a bit or share any related link to read?

> [@juan.m.pais](#):
>
> Hey there, i’m finishing the Survey Challenge; i’m having big trouble with the elements alignment inside the survey.
> 
> 1 - my inputs horizontal alignment are wrong, when i add padding for the input text the box will grow to the right.
> 
> 2 - the vertical margin between elements (labels, inputs, etc) are huge and i can’t adjust them; once i start using the flex box thing they just go too separate.
> 
> 3 - some inputs will look diferent under the same class (input-formato)
> 
> I’m having a format nightmare with this one, any help would be appreciated!
> 
> My code:  
> [https://codepen.io/juanpais/pen/QWyJQGN?editors=1100](https://codepen.io/juanpais/pen/QWyJQGN?editors=1100)
> 
> **Your browser information:**
> 
> User Agent is: `Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0`.
> 
> **Challenge:** Build a Survey Form
> 
> **Link to the challenge:**  
> [https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-survey-form](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-survey-form)

My code:  
[https://codepen.io/juanpais/pen/QWyJQGN?editors=1100](https://codepen.io/juanpais/pen/QWyJQGN?editors=1100)

**Your browser information:**

User Agent is: `Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0`.

**Challenge:** Build a Survey Form

**Link to the challenge:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![SupremeSadat](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/supremesadat/32/134568_2.png) [@SupremeSadat](https://forum.freecodecamp.org/u/SupremeSadat)\
**Post date:** [July 21, 2020, 11:28pm UTC](https://forum.freecodecamp.org/t/survey-form-project-after-before-box-sizing-align-problem/411003/2 "2020-07-21T23:28:39Z")

</div>

![image](https://global.discourse-cdn.com/freecodecamp/original/3X/3/a/3a400a6d29bd5475c376bb7585d1a29a7030ea39.png)

by default the sizing is content box. This means that margin, border and padding are not included when you specify the width. Alot of people switch it box-sizing border-box because it means you dont have to calculate the the real width. The width is the real width.

alot of people start with the following settings:

- {

It means that the width you say the box should be, is its true size. The star means apply to all children.

---

<div class="post-metadata">

**Author:** ![juan.m.pais](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/juan.m.pais/32/134372_2.png) [@juan.m.pais](https://forum.freecodecamp.org/u/juan.m.pais)\
**Post date:** [July 21, 2020, 11:48pm UTC](https://forum.freecodecamp.org/t/survey-form-project-after-before-box-sizing-align-problem/411003/3 "2020-07-21T23:48:47Z")

</div>

Thanks, also [read](https://css-tricks.com/box-sizing/) this article.

The \*, after and before selectores were also a surprise for me, this is the first time i’ve saw such a thing.

Will try to keep coding and learning,

Thanks!

---

<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:** [May 31, 2021, 3:23pm UTC](https://forum.freecodecamp.org/t/survey-form-project-after-before-box-sizing-align-problem/411003/4 "2021-05-31T15:23:52Z")

</div>