UL elements being overflow outside of parent container

Question

I am having a bit of trouble getting my li elements to stay within the parent container. They continue to go off the right side of the page for some reason.

Overflow: Auto seems to fix the problem, but the issue with that is that it cuts off the border and doesn't allow me to scale the li elements properly (I want to have them be about 30% width of the parent container eventually).

Can anyone explain why this is happening or suggest an alternative solution?

Here is my code: https://repl.it/KZXi/0

Answer 1

You can change the box-sizing on your list elements to include padding.

box-sizing:border-box

At the moment your list elements are 100% width + padding-left:40px and padding-right:40px so they overflow the parent container.

Answer 2

https://repl.it/KZXi/2 The problem is the by the default the box-sizing property excludes the padding, that is why your li element contain more than 100% of its parent please read https://www.w3schools.com/cssref/css3_pr_box-sizing.asp To solve just add..

.answerBox {
    border: 2px solid black;
    background-color: white;
    padding: 40px;
    width: 100%;
  height: 130px;
    box-sizing: border-box;
    /*margin-left: 20px;
    margin-bottom: 30px;*/
}

https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 3

Try this CSS to your li :

li.answerBox {
  border: 2px solid black;
  background-color: white;
  padding: 4%;            /* <---- */
  width: 91%;             /* <---- */
  height: 70px;

The problem is, when you give padding and border, the content overflows.