Newbie alert.

I'm using angular-chart and charts.js to render a SPA with between 8-12 charts. At this point, I'm trying to render them in effectively two rows. The first row will render several of one type of chart, and the second row will have the same number of charts, but a different type. The two charts in each column are related.

What I have is close, but I find that the left edge of the first chart in each row is cut off, by just a few pixels. I don't know if this is a chart.js bug, but I'd like to implement a workaround. I'm trying to figure out how to render a thin gutter on the left side, but everything I've tried ends up taking up a large amount of space and messing up the layout.

This is an excerpt of my html:
Code:
	<div class="container-fluid">
		<div class="row">
			<div ng-repeat="dataCenterData in last30MinutesDataCenterDataList">
				<div class="row col-md-3">
					<canvas id="last30Minutes-chart-{{dataCenterData.dataCenter}}"
							class="chart chart-line"
							chart-data="dataCenterData.data"
							chart-labels="dataCenterData.labels"
							chart-series="dataCenterData.series"
							chart-options="dataCenterData.options"></canvas>
				</div>
			</div>
		</div>
		<div class="row">
			<div ng-repeat="dataCenterData in dataCenterDataList">
				<div class="row col-md-3">
					<canvas id="daily-chart-{{dataCenterData.dataCenter}}"
						class="chart chart-bar" chart-data="dataCenterData.data"
						chart-labels="dataCenterData.labels"
						chart-series="dataCenterData.series"
						chart-options="dataCenterData.options"></canvas>
				</div>
			</div>
		</div>
	</div>
What can I do to move the left edge of the first chart over a few pixels?