# Product Landing Page: Presentino

**URL:** <https://forum.freecodecamp.org/t/product-landing-page-presentino/419483>\
**Category:** General\
**Created:** [September 7, 2020, 11:37pm UTC](https://forum.freecodecamp.org/t/product-landing-page-presentino/419483 "2020-09-07T23:37:45Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![miku86](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/miku86/32/95580_2.png) [@miku86](https://forum.freecodecamp.org/u/miku86)\
**Post date:** [September 8, 2020, 6:53am UTC](https://forum.freecodecamp.org/t/product-landing-page-presentino/419483/2 "2020-09-08T06:53:39Z")

</div>

Hey there,

nice to meet you! 👋

There is a CSS property called `box-sizing`.

> The `box-sizing` property defines how the width and height of an element are calculated: should they include padding and borders, or not.

[Source](https://www.w3schools.com/CSSref/css3_pr_box-sizing.asp)

The default value of this attribute is:

> content-box: Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included.

When you use `width: 100%` on your input, you give your input content the width 100% and the border and padding go on top. That’s why it overflows. When you hover over the element in the Dev Tools, you can see this.

You can have a look at this one:

> border-box: The width and height properties (and min/max properties) includes content, padding and border.

I think this is what makes more sense.

---

_[View the full topic](https://forum.freecodecamp.org/t/product-landing-page-presentino/419483)._