Already know the correct answer, but can someone explain it

Question

Hi there,

The quiz question is: "Say we have two floated list items with a width of 45% each. Which of the following declarations, if applied to the list items, will perfectly fill the remainder of the parent element’s width?"

The answers can be: "Margin: 10%;" "Margin: 100%;" "Margin: 2.5%;" "Margin: 0%;"

I already know the correct answer is 2,5. But that is only because I remembered it from watching the video. What I would like to know, is if there is someone who can explain it to me, so I can understand why this is the correct answer. I have watch the video over and over agin, but somehow I still don´t understand it, maybe it is because english isn´t my mother language, is there anyone how can explain it to me like I am a six year old kid??

Answer 1 · 2017-05-07T10:48:44Z

May 7, 2017 10:48am

Here's how I understand it:

We want to make the total width of everything in the parent element equal to 100%. Since the floated list items take up 45% each, together they make up for 90% of the total width. To perfectly fill the remainder, the margins need to take up the remaining 10% of the width. Since there are 4 sides (2 for each list item), we divide that 10% by 4 to get 2.5%.

Moderator Edit: Moved response from the Comments section to Answers.

Welcome to the Treehouse Community

Looking to learn something new?

Rasmus Boll

Rasmus Boll

Already know the correct answer, but can someone explain it

Tomas Pavlik

Tomas Pavlik

1 Answer

Nikki Bollman

Nikki Bollman

Rasmus Boll

Rasmus Boll