# Too Much Width & Height

**URL:** <https://forum.freecodecamp.org/t/too-much-width-height/398807>\
**Category:** General\
**Created:** [June 4, 2020, 2:31pm UTC](https://forum.freecodecamp.org/t/too-much-width-height/398807 "2020-06-04T14:31:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ricardoaguilarm](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ricardoaguilarm/32/121459_2.png) [@ricardoaguilarm](https://forum.freecodecamp.org/u/ricardoaguilarm)\
**Post date:** [June 4, 2020, 2:31pm UTC](https://forum.freecodecamp.org/t/too-much-width-height/398807/1 "2020-06-04T14:31:29Z")

</div>

I’m creating a simple tip calculator, based in a dribbled design.  
I’m following mobile first aproach, exactly **iphone 6/7/8 (375 x 667)**.  
BUT i’m having a lot of extra space in the design, and i don’t know what is happend.

Can you rate my code and teel me what i’m failure? Thanks in advance!

_CODEPEN:_  
[https://codepen.io/ricardonothing/pen/QWywEMj](https://codepen.io/ricardonothing/pen/QWywEMj)

Captures:  
Looks normal, but when you move the mouse… in the second capture we can see the extra space.

 ![CapNormal](https://global.discourse-cdn.com/freecodecamp/original/3X/8/5/854034414eb19e4b39a9bff3ed7c2b2b526db04f.jpeg)

 ![errorCapCSS](https://global.discourse-cdn.com/freecodecamp/original/3X/7/c/7c9f3574c7f286b44e4c5ad2c83f0052cc6520b7.png)

---

<div class="post-metadata">

**Author:** ![Naomi](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/naomi/32/422181_2.png) [@Naomi](https://forum.freecodecamp.org/u/Naomi)\
**Post date:** [June 4, 2020, 4:53pm UTC](https://forum.freecodecamp.org/t/too-much-width-height/398807/2 "2020-06-04T16:53:35Z")

</div>

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

This is what I see. No extra space around the sides, but the text at the top overflows.

---

<div class="post-metadata">

**Author:** ![ricardoaguilarm](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ricardoaguilarm/32/121459_2.png) [@ricardoaguilarm](https://forum.freecodecamp.org/u/ricardoaguilarm)\
**Post date:** [June 4, 2020, 5:19pm UTC](https://forum.freecodecamp.org/t/too-much-width-height/398807/3 "2020-06-04T17:19:52Z")

</div>

I dont’t understand anything ☹ CSS is hard.

---

<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, 6:51pm UTC](https://forum.freecodecamp.org/t/too-much-width-height/398807/4 "2021-06-01T18:51:27Z")

</div>

Closed on June 1, 2021, 6:51pm UTC