Use horizontal padding

assets/css/custom.css

@@ -8,6 +8,12 @@ a:active {
   color: #167ac6;
 }
 
-.l-box {
-  padding: 1em;
+.h-box {
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.v-box {
+  padding-top: 1em;
+  padding-bottom: 1em;
 }

src/views/index.ecr

@@ -7,7 +7,7 @@
 <% slice.each do |video| %>
     <% player_response = JSON.parse(video.info["player_response"]) %>
     <div class="pure-u-1 pure-u-md-1-4">
-        <div class="l-box">
+        <div class="h-box">
             <a style="width:100%;" href="/watch?v=<%= video.id %>">
                 <img style="width:100%;" src="<%= player_response["videoDetails"]["thumbnail"]["thumbnails"][0]["url"] %>"/>
                 <p><%= video.title %></p>

src/views/layout.ecr

@@ -26,7 +26,7 @@
         </div>
       </div>
       <%= content %>
-      <center class="l-box">
+      <center class="h-box">
         Released under AGPLv3 by <a href="https://github.com/omarroth">Omar Roth</a> -
         source available <a href="https://github.com/omarroth/invidious">here</a>
       </center>

src/views/search.ecr

@@ -6,7 +6,7 @@
 <div class="pure-g">
 <% slice.each do |video| %>
     <div class="pure-u-1 pure-u-md-1-4">
-        <div class="l-box">
+        <div class="h-box">
             <a style="width:100%;" href="<%= video["link"] %>">
                 <img style="width:100%;" src="<%= video["thumbnail"] %>"/>
                 <%= video["title"] %>

src/views/watch.ecr

@@ -6,7 +6,7 @@
 <title><%= video.title %> - Invidious</title>
 <% end %>
 
-<div class="l-box">
+<div class="h-box">
 <% if listen %>
 <%= render "src/views/player/audio.ecr" %>
 <% else %>
@@ -85,7 +85,7 @@ function toggle_comments(target) {
 };
 </script>
 
-<div class="l-box">
+<div class="h-box">
 <h1>
     <%= video.info["title"] %> 
     <% if listen %>
@@ -102,7 +102,7 @@ function toggle_comments(target) {
 
 <div class="pure-g">
     <div class="pure-u-1 pure-u-md-1-5">
-        <div class="l-box">
+        <div class="h-box">
         <p><i class="fa fa-eye" aria-hidden="true"></i> <%= number_with_separator(video.views) %></p>
         <p><i class="fa fa-thumbs-up" aria-hidden="true"></i> <%= number_with_separator(video.likes) %></p>
         <p><i class="fa fa-thumbs-down" aria-hidden="true"></i> <%= number_with_separator(video.dislikes) %></p>
@@ -113,7 +113,7 @@ function toggle_comments(target) {
     </div>
 
     <div class="pure-u-1 pure-u-md-3-5">
-        <div class="l-box">
+        <div class="h-box">
         <p>
             <a href="https://youtube.com/channel/<%= video.info["ucid"] %>">
                 <h3><%= video.info["author"] %></h3>
@@ -146,7 +146,7 @@ function toggle_comments(target) {
     </div>
 
     <div class="pure-u-1 pure-u-md-1-5">
-        <div class="l-box">
+        <div class="h-box">
     <% rvs.each do |rv| %>
         <% if rv.has_key?("id") %>
         <a href="/watch?v=<%= rv["id"] %>">