содержания превышает мой ящик (маленький CSS выпуск)

Question

Im копирования этого Gensis Тему для CSS практики: http://my.studiopress.com/themes/daily-dish/#demo-full

теперь я имею вопрос, так как один из черных ящиков превышает родительский-Box. Атрибут причиной этого является следующий код

.heading{ 
    padding-left: 2em; 

однако я хочу это дополнение. Как сделать черный фон остановленным в конце родительского поля (id = 'right_1') и сохранить левое дополнение? * Вы должны прокрутить вправо при выполнении фрагмента кода, чтобы этот вопрос

*{ 
 
    margin: 0 auto; 
 
} 
 

 
body{ 
 
    margin: 0 auto; 
 
    background-image: url('background.png'); 
 
} 
 

 

 
.heading{ 
 
    padding-left: 2em; 
 
    border: 1px solid green; 
 
    font-size: 1em; 
 
    display: flex; 
 
    width: 100%; 
 
    align-items: center; 
 
    color: white; 
 
    background-color: black; 
 
    height: 40px; 
 
} 
 

 

 
header{ 
 
    padding: 70px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
#wrapper{ 
 
    border: 1px solid lightgrey; 
 
    padding-left: 40px; 
 
    padding-right: 40px; 
 
    margin: auto; 
 
    width: 960px; 
 
    height: 2000px; 
 
    background: white; 
 
} 
 

 
main{ 
 
    display: flex; 
 
    border: 1px solid red; 
 
} 
 

 
.blackbox{ 
 
    
 
} 
 
#left { 
 
    width: 100%; 
 
    display: flex; 
 
    height: 1000px; 
 
    border: 1px solid black; 
 
} 
 

 
#left_1{ 
 
    display: flex; 
 
    width: 100%; 
 
} 
 

 
#right { 
 
    margin-left: 5%; 
 
    width: 30%; 
 
    display: flex; 
 
    border: 1px solid black; 
 
} 
 

 
#right_1{ 
 
    width: 100%; 
 
}

<main> 
 
\t <section id='left'> 
 
\t \t <section id='left_1'> 
 
\t \t \t <h2 class='heading'>Featured Dish</h2> 
 
\t \t </section> 
 
\t </section> 
 

 
\t <aside id='right'> 
 
\t \t <aside id='right_1'> 
 
\t \t \t <h2 class='heading'>About the Author</h2> 
 
\t \t </aside> 
 
\t </aside> 
 
</main> 
 
</div>

Answer 1

Вы можете добавить box-sizing:border-box к .heading элементу.

Таким образом, свойства ширины и высоты включают прокладку.

CSS будет:

.heading { 
    padding-left: 2em; 
    border: 1px solid green; 
    font-size: 1em; 
    display: flex; 
    width: 100%; 
    align-items: center; 
    color: white; 
    background-color: black; 
    height: 40px; 
    box-sizing: border-box; // Add box-sizing: border-box 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    } 

Надеется, что это помогает :)

Answer 2

Вы можете решить эту проблему, делая box-sizing: border-box;

Попробуйте ниже CSS

*{ 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

JSFIDDLE DEMO

Read more about box-sizing