Bootstrap divs don't line up when page is minimized - html

Question

This is what I have: http://codepen.io/auble220/pen/rOPBKP. I added media queries here: http://codepen.io/auble220/pen/avyZZE, which isn't too bad, but I know there has to be a better way. I tried using Bootstrap's clearfix class, but that doesn't change anything. This is the code for that section:
html:
<div id="brkSesDiv" class="row">
<div id="breakDiv" class="col-md-6 text-right">
<button class="plusMinus" id="plus1">+</button>
<h1 id="breakLen">05</h1>
<button id="minus1" class="plusMinus">-</button>
<h4>break length</h4>
</div>
<div id="sesDiv" class="col-md-6 text-left">
<button id="plus2" class="plusMinus">+</button>
<h1 id="sesLen">25</h1>
<button id="minus2"class="plusMinus">-</button>
<h4>session length</h4>
</div>
</div>
css:
#brkSesDiv {
margin: 30px 0 0 0;
height: 100px;
width: 350px;
margin: auto;
}
#breakDiv {
display: inline;
}
#breakLen {
display: inline;
}
#sesDiv {
float: left;
}
#sesLen {
display: inline;
}

Answer 1

Here's an example of you how you can make this mobile first and may give you a base to adjust to your needs.
I would (personally) avoid mixing classes/IDs with structural elements like containers/rows/columns other then pure styling (ie color, text etc) as this can effect how the grid is designed to operate. You can however place your content inside these columns with much better results (generally speaking).
Have a fixed width for this isn't necessary, so I removed that as well as place everything inside of rows/columns instead of combining them:
#brkSesDiv {
margin: 30px 0 0 0;
height: 100px;
width: 350px;
margin: auto;
}
See working example Snippet.
var sec = 0;
var min;
var breakLenCount = 5;
var sesLenCount = 25;
var breakTimer;
var timerRunning = false;
$(document).ready(function() {
$('#plus1').click(function() {
if (breakLenCount < 9) {
$('#breakLen').html('0' + (breakLenCount += 1));
} else {
$('#breakLen').html(breakLenCount += 1);
}
});
$('#minus1').click(function() {
if (breakLenCount < 9) {
$('#breakLen').html('0' + (breakLenCount -= 1));
} else {
$('#breakLen').html(breakLenCount -= 1);
}
});
$('#plus2').click(function() {
if (sesLenCount < 10) {
$('#sesLen').html('0' + (sesLenCount += 1));
$('#min').html(sesLenCount);
} else {
$('#sesLen').html(sesLenCount += 1);
$('#min').html(sesLenCount);
}
});
$('#minus2').click(function() {
if (sesLenCount < 11) {
$('#sesLen').html('0' + (sesLenCount -= 1));
$('#min').html(sesLenCount);
} else {
$('#sesLen').html(sesLenCount -= 1);
$('#min').html(sesLenCount);
}
});
min = sesLenCount;
sec = 0;
$('#timer').click(function() {
if (timerRunning) {
clearInterval(sesTimer);
timerRunning = false;
return;
} else {
sesTimer = setInterval(time, 1000);
}
});
function time() {
timerRunning = true;
sec--;
if (sec < 00) {
sec = 59;
min--;
}
if (sec < 10) {
sec = '0' + sec;
}
if (min < 1 && sec < 1) {
timerRunning = false;
clearInterval(sesTimer);
min = breakLenCount;
$('#min').html(min);
$('#sec').html(00);
bTimer = setInterval(breakTimer, 1000);
}
$('#min').html(min);
$('#sec').html(sec);
}
function breakTimer() {
sec--;
if (sec < 00) {
sec = 59;
min--;
}
if (sec < 10) {
sec = '0' + sec;
}
if (min < 1 && sec < 1) {
clearInterval(bTimer);
min = sesLenCount;
$('#min').html(min);
$('#sec').html(00);
setInterval(time, 1000);
}
$('#sec').html(sec);
$('#min').html(min);
}
});
body {
font-family: Arial, sans-serif;
}
h1#pTimer {
font-size: 5em;
}
h1.title {
font-size: 4em;
color: #444444;
text-shadow: 3px 3px 5px;
}
#brkSesDiv {
padding-top: 10px;
}
#breakDiv {
display: inline;
}
#breakLen {
display: inline;
}
#sesLen {
display: inline;
}
.plusMinus {
border-radius: 25%;
border: 1px solid transparent;
background-color: transparent;
color: #444;
font-size: 2.5em;
font-weight: bold;
}
#timer {
margin: 25px auto 0 auto;
width: 300px;
height: 300px;
border: 3px solid #444;
border-radius: 50%;
box-shadow: 0px 0px 25px;
background-color: #fff;
cursor: pointer;
display: table;
vertical-align: middle;
}
#time {
display: table-cell;
vertical-align: middle;
}
#media (max-width: 480px) {
h1#pTimer {
font-size: 2.5em;
}
h1.title {
font-size: 2em;
}
#timer {
margin: 10px auto 0 auto;
width: 175px;
height: 175px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="text-center">
<h1 id="pTimer">Pomodoro Timer</h1>
</div>
<div class="row">
<div id="brkSesDiv">
<div class="col-xs-6 text-right">
<div id="breakDiv">
<button class="plusMinus" id="plus1">+</button>
<h1 class="title" id="breakLen">05</h1>
<button id="minus1" class="plusMinus">-</button>
<h4>break length</h4>
</div>
</div>
<div class="col-xs-6 text-left">
<div id="sesDiv">
<button id="plus2" class="plusMinus">+</button>
<h1 class="title" id="sesLen">25</h1>
<button id="minus2" class="plusMinus">-</button>
<h4>session length</h4>
</div>
</div>
</div>
</div>
<div id="timer" class="text-center">
<div id="time">
<h1 class="title">Session</h1>
<h1 class="title"><span id="min">25</span>:<span id="sec">00</span></h1>
</div>
</div>
</div>