How to keep a text inside a box in small devices - html

Question

I created two rows with their respective columns...but part of the content(heading) of the last column sticks out of the div when I scale the page down.
<div class="container">
<!------------------------------------ first section-------------------------------------------------->
<div class="row" id="firstSection">
<div class="col-xs-12">
<span class="glyphicon glyphicon-tree-deciduous"></span>
<h2 class="heading2">Your home away from home</h2>
<h4>Prima luce, cum quibus mons aliud consensu ab eo. Praeterea iter est quasdam res ex<br/>communi.Etiam habetis sem dicantur magna mollis euismod.</h4>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolorem id in inventore, maiores consequuntur modi? Omnis dolore quam vel. Illo accusantium, porro laudantium saepe necessitatibus id ullam voluptate nihil!<br/></p>
</div>
</div>
<!------------------------------------ end of first section-------------------------------------------------->
<!------------------------------------ second section-------------------------------------------------->
<div class="row" id="secondSection">
<div class="col-lg-6">
<article class="section1">
<span class="glyphicon glyphicon-tree-deciduous"></span>
<h2>BUSINESS TRAVELLER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eveniet distinctio non, dolor asperiores ducimus quidem. Tempore exercitationem, velit magnam beatae quia, similique, eaque aliquam provident inventore iste et sequi! and fre</p>
<button type="button" class="btn btn-default">READ MORE</button>
</article>
</div><!-- end of column --->
<div class="col-lg-6">
<section class="section2">
<span class="glyphicon glyphicon-tree-deciduous"></span>
<h2>ACCOMPANYING A LOVED-ONE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eveniet distinctio non, dolor asperiores ducimus quidem. Tempore exercitationem, velit magnam beatae quia, similique, eaque aliquam provident inventore iste et sequi!</p>
<button type="button" class="btn btn-default">READ MORE</button>
</section>
</div><!-- end of column --->
</div><!-- end of row -->
<!------------------------------------ end of second section------------------------------------------->
</div><!-- end of container -->
The CSS is as it follows
.heading2{
font-family: 'Arizonia', cursive;
font-size: 50px;
text-align: center;
}
#firstSection{
background-color:#ffffff;
margin-left:1px;
margin-right:1px;
padding-top: 120px;
margin-top:-80px;
}
.section1{
background: #ffffff;
padding: 50px;
margin-top:30px;
}
.section2{
background: #ffffff;
padding: 50px;
margin-top:30px;
}
And you can also confirm as my jsfiddle shows
https://jsfiddle.net/Wosley_Alarico/g8xj2yq4/

Answer 1

You can add word-break: break-all; to your .section 2 if you're okay with the title breaking in the middle of any two letters:
.section2{
background: #ffffff;
padding: 50px;
margin-top:30px;
word-break: break-all;
}
However, I would personally rather set the font-size relative to the display width with something like:
.section2 h2 {
font-size: 4vw;
}
Or use media queries to change the font-sizes for different screen widths:
#media (max-width: 500px){
h2 {
//set whatever font-size you want for headers
}
p {
//set font-size for p
}
}

Answer 2

By using #media queries to shrink the text down when the device is smaller.
E.g.
#media screen and (max-width:480px){
h2 {
font-size:14px;
}
}

Answer 3

You could do something like this to break long words
h2 {
word-break: break-word;
}
But that isn't very pretty. A better option is to use media queries to resize the font
#media screen and (max-width: 480px) {
h2 {
font: 12px;
}
}