I'm currently utilizing Zurb Foundation within a rails project. My goal is to structure a basic page that consists of a table, text field, and a couple of buttons.
However, I am facing a significant gap on the left side of my content, causing the right side of the table to extend off-screen and necessitating horizontal scrolling to view the content. The code I am working with is relatively straightforward. I create a twelve-column row multiple times.
For example:
<div class="row">
<div class="twelve columns">
<h1>Customers</h1>
</div>
</div>
You can reference a screenshot of the issue here. It's evident that there is an abundance of white space to the left of the table, causing it to exceed the right edge:
I am confident that I am making a simple mistake somewhere, but I haven't been able to identify it yet. This marks my initial experience using Foundation - typically, I work with Bootstrap, but decided to explore something new for this particular project.
Update:
Full HTML:
<div class="row">
<div class="twelve columns">
<h1>Customers</h1>
</div>
</div>
<div class="row">
<div class="twelve columns">
<%= form_tag customers_path, :method => 'get' do %>
<p>
<%= text_field_tag :search, params[:search], :placeholder => "Enter last name..." %>
<%= submit_tag "Search", :name => nil, :class => 'button small' %>
</p>
<% end %>
</div>
</div>
<div class="row">
<div class="twelve columns">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>License #</th>
<th>Date of birth</th>
<th>Emergency Contact Name</th>
<th>Emergency Contact #</th>
<th>Address</th>
<th>City</th>
<th>Registration Date</th>
<th>Parent/Guardian?</th>
<th>Guardian Tel Number</th>
<th>Guardian License #</th>
<th>Participant Signature</th>
<th>Guardian Signature</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<% @customers.each do |customer| %>
<tr>
<td><%= customer.firstName %></td>
<td><%= customer.last_name %></td>
<td><%= customer.licenseNum %></td>
<td><%= customer.dob %></td>
<td><%= customer.contactName %></td>
<td><%= customer.contactNum %></td>
<td><%= customer.address %></td>
<td><%= customer.city %></td>
<td><%= customer.currentDate %></td>
<td><%= customer.guardian %></td>
<td><%= customer.guardianNum %></td>
<td><%= customer.guardianLicenseNum %></td>
<td><%= customer.participant_image_name %></td>
<td><%- customer.guardian_image_name %></td>
<td><%= link_to 'View', customer, :class => 'button secondary' %></td>
<td><%= link_to 'Edit', edit_customer_path(customer), :class => 'button secondary' %></td>
<td><%= link_to 'Delete', customer, method: :delete, data: { confirm: 'Are you sure you want to delete this customer? This cannot be undone.' }, :class => 'button alert' %></td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="twelve columns">
<%= will_paginate @customers %>
</div>
</div>
<div class="row">
<div class="twelve columns">
<%= link_to 'New Customer', new_customer_path, class: "button success"%>
</div>
</div>