I'm using MaterializeCSS for creating layouts, I've got a container which contains 2 rows but any content which is not in column displays outside of container.
Here is my code:-
<div class="container">
<div style="border: 1px solid #b1b1b1;">
<div class="row">
<div class="col s12">Hello</div>
</div>
<div class="row">World
<div class="col s12">Hello</div>
</div>
</div>
</div>
And here is how it looks:-
Why is this happening even though my content is inside container and should also display within container boundaries?
Edit:
<div class="add-arena grey lighten-3">
<div class="row">
<div class="col s12 center deep-orange white-text">Add Arena</div>
</div>
<div class="row">
<div class="add-arena-image-holder col s4">
<form action="#">
<div class="file-field input-field col s11">
<div class="btn">
<span>File</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
</div>
<div class="add-arena-description col s8">
<div class="row">
<div class="input-field col s6">
<input placeholder="What will it be called?" id="first_name" type="text" class="validate">
<label for="first_name">Arena Name</label>
</div>
<div class="input-field col s6">
<input placeholder="Arena Number" id="first_name" type="text" class="validate">
<label for="first_name">Arena</label>
</div>
</div>
<div class="row">
<div class="col s3 right">
<a class="waves-effect waves-light btn deep-orange"><i class="material-icons left">send</i>Add</a>
</div>
</div>
</div>
</div>
</div>
All content should be in the actual cols as the rows apply negative margins to stretch them to the full width. Always put the content in the col's.
https://codepen.io/anon/pen/EXZzVr
<div class="container">
<div style="border: 1px solid #b1b1b1;">
<div class="row">
<div class="col s12">Hello</div>
</div>
<div class="row">
<div class="col s12">Hello World</div>
</div>
</div>
</div>
What exactly do you want to achieve?
Take a look at following lines: