page-header and row alignment - php

Question

Picture of the issue.
I'm learning how to display mysql database data with php and running into a slight issue with alignment. The page-header of this site doesn't align with the first row of products. Here's the code:
<div class="container">
<div class="page-header">
<h1>For Sale</h1>
</div>
<div class="products">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<li class="product thumbnail">
<form method="post" action="cart_update.php">
<div class="product-content">
<div class="product-thumb"><img src="{$obj->product_img_name}" style="width:100%"></div>
<div class="caption">
<h3>{$obj->product_name}</h3>
<div class="product-desc"><p>{$obj->product_desc}</p></div>
<div class="product-info">
Price: {$currency}{$obj->price}
</div>
<fieldset>
<label>
<span>Color</span>
<select name="product_color">
<option value="Black">Black</option>
<option value="Silver">Silver</option>
</select>
</label>
<label>
<span>Quantity</span>
<input type="text" size="2" maxlength="2" name="product_qty" value="1" />
</label>
</fieldset>
<input type="hidden" name="product_code" value="{$obj->product_code}" />
<input type="hidden" name="type" value="add" />
<input type="hidden" name="return_url" value="{$current_url}" />
<div align="left"><button type="submit" class="add_to_cart btn btn-primary">Add</button></div>
</div></div>
</form>
</li>
</div>

Answer 1

Since you're using bootstrap, wrapping the <h1> tag with a <div class="container"> will horizontally align the title with your product items.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="page-header">
<div class="container">
<h1>For Sale</h1>
</div>
</div>
<div class="products">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<li class="product thumbnail">
<form method="post" action="cart_update.php">
<div class="product-content">
<div class="product-thumb"><img src="https://placehold.it/350x150" style="width:100%"></div>
<div class="caption">
<h3>name</h3>
<div class="product-desc">
<p>description</p>
</div>
<div class="product-info">
Price: $ 10,50
</div>
<fieldset>
<label>
<span>Color</span>
<select name="product_color">
<option value="Black">Black</option>
<option value="Silver">Silver</option>
</select>
</label>
<label>
<span>Quantity</span>
<input type="text" size="2" maxlength="2" name="product_qty" value="1" />
</label>
</fieldset>
<input type="hidden" name="product_code" value="{$obj->product_code}" />
<input type="hidden" name="type" value="add" />
<input type="hidden" name="return_url" value="{$current_url}" />
<div align="left">
<button type="submit" class="add_to_cart btn btn-primary">Add</button>
</div>
</div>
</div>
</form>
</li>
</div>