Nested Columns / Rows [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm having a tough time with nested columns in my layout. In the following code snippet the col-md-3 floats above the other two grids using a negative margin. Everything looks fine except for when I try to add text to one of the nested columns, and then it expands out of the row. Any idea what could be causing this? I have a feeling I've made a number of mistakes with my code and I'd appreciate some suggestions on how to tackle this problem.
div {
background-color: grey;
}
.schedule-box-header {
font-size: 32px;
color: #1cbbb4;
text-transform: uppercase;
}
.schedule-box-sub-header {
font-size: 20px;
color: #747474;
text-transform: uppercase;
}
.schedule-box-top {
background-color: #1cbbb4;
height: 5px;
margin-bottom: 10px;
}
.schedule-box-bottom {
background-color: #1cbbb4;
}
.schedule-box-bottom h3 {
text-align: center;
padding: 10px;
color: #ffffff;
}
<div class="container content-wrap drop-shadow">
<div class="row row-buffer">
<div class="col-md-3">
<img class="img-responsive center-block" src="http://placehold.it/350x150">
</div>
<div class="col-md-5 company-name">
<h1>WINE REVIEWS</h1>
<h2>HOME OF THE REVIEWS</h2>
</div>
<div class="col-md-3 schedule-box drop-shadow">
<div class="row">
<div class="col-md-12 schedule-box-top"></div>
</div>
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://placehold.it/350x150">
</div>
<div class="col-sm-8">
<h1 class="schedule-box-header">Expandskskjsfs
<h2 class="schedule-box-sub-header">one time thing</h2>
</div>
</div>
<div class="row row-buffer-small">
<div class="col-md-12 forms">
<div class="form-group">
<input type="email" class="form-control input-date" placeholder="Pick a Date">
</div>
<div class="form-group">
<input type="email" class="form-control input-time" id="email" placeholder="Pick a Time">
</div>
<div class="form-group">
<input type="email" class="form-control input-group" placeholder="Group Size">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 schedule-box-bottom">
<h3>Schedule</h3>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
JS Fiddle: http://jsfiddle.net/xbwstdv7/1/

Answer 1

you mean the text "Expandskskjsfs"? If yes it overflows the container because there is no space so by default it will show the text in one row even if it overflows the container.
You could use in your css:
.schedule-box-header {
word-break: break-all;
}
that will break the word when text reach the end of its container.