title: Wicked PDF generated a PDF with a lot of white space
body: <p>I'm trying to generate a PDF from an HTML template with the intention that it will fill out the entire page so users can print them out. However, there's white space in the right and bottom and I'm not sure how to make it fill out the entire PDF.</p>
  <p>HTML template:</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;%
    date = nil
    begin
      date = Date.new(date_y.to_i, date_m.to_i, date_d.to_i)
    rescue ArgumentError
      raise StandardError, t('pdfs.digital_invitation.date_is_invalid')
    end
  
    location = Location.find(location_id)
    location_url = site_locations_root_url(location.slug, url_options)
  %&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset='utf-8' /&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css?family=Roboto:300,400,700&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;%= stylesheet_link_tag wicked_pdf_asset_base64(&quot;pdf&quot;) %&gt;
    &lt;/head&gt;
    &lt;body id=&quot;template3&quot; style=&quot;background-image: url('&lt;%= wicked_pdf_asset_base64(&quot;pdf/template3-bg.png&quot;) %&gt;');&quot;&gt;
      &lt;main&gt;
        &lt;h1 class=&quot;title&quot;&gt;&lt;%= t('pdfs.digital_invitation.title') %&gt;&lt;/h1&gt;
        &lt;p class=&quot;invite&quot;&gt;
          &lt;%= t('pdfs.digital_invitation.please') %&gt; &lt;%= l(date, format: :long) %&gt; &lt;%= t('pdfs.digital_invitation.for') %&gt;
        &lt;/p&gt;
        &lt;div&gt;
          &lt;h2 class=&quot;name&quot;&gt;&lt;%= name_of_party %&gt;&lt;/h2&gt;
          &lt;p class=&quot;times&quot;&gt;
            &lt;span class=&quot;start-time&quot;&gt;&lt;%= t('pdfs.digital_invitation.start_time') %&gt; &lt;%= start_time %&gt;&lt;/span&gt;&lt;span class=&quot;end-time&quot;&gt;&lt;%= t('pdfs.digital_invitation.end_time') %&gt; &lt;%= end_time %&gt;&lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;p class=&quot;location&quot;&gt;
          &lt;strong&gt;&lt;%= &quot;Sky Zone #{location.name}&quot; %&gt;&lt;/strong&gt;&lt;br&gt;
          &lt;%= address_for_display(location) %&gt;
        &lt;/p&gt;
        &lt;p class=&quot;rsvp&quot;&gt;&lt;%= t('pdfs.digital_invitation.rsvp', name: &quot;#{contact_first} #{contact_last}&quot;) %&gt;&lt;br/&gt;&lt;a href=&quot;tel:&lt;%= contact_phone %&gt;&quot;&gt;&lt;%= contact_phone %&gt;&lt;/a&gt;&amp;nbsp;&lt;%= t('pdfs.digital_invitation.or') %&gt;&amp;nbsp;&lt;a href=&quot;mailto:&lt;%= contact_email %&gt;&quot;&gt;&lt;%= contact_email %&gt;&lt;/a&gt;&lt;/p&gt;
        &lt;a class=&quot;waiver&quot; href=&quot;&lt;%= location_url %&gt;&quot;&gt;&lt;%= t('pdfs.digital_invitation.waiver', slug: location.slug) %&gt;&lt;/a&gt;
        &lt;p class=&quot;legal&quot;&gt;
          &lt;%= t('pdfs.digital_invitation.legal_1') %&gt; &lt;%= t('pdfs.digital_invitation.legal_2') %&gt; &lt;%= t('pdfs.digital_invitation.legal_highlight') %&gt;
        &lt;/p&gt;
      &lt;/main&gt;
  
      &lt;footer&gt;
        &lt;div class=&quot;logo-wrapper&quot;&gt;&lt;%= image_tag wicked_pdf_asset_base64(&quot;skyzone_logo.svg&quot;) %&gt;&lt;/div&gt;
      &lt;/footer&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Stylesheet:</p>
  <pre><code>// Declaring the font for pdf specifically to just use the truetype version
  @font-face {
    font-family: 'EngschriftDIND';
    font-weight: normal;
    src: asset-data-url('3329DD_0_0.ttf') format('truetype');
  }
  
  $font-heading: 'EngschriftDIND', sans-serif;
  $orange: #f36e36;
  
  // everything generated under the assumption of an 8.5x11 page at 96dpi (816px x 1056px)
  
  #template1,
  #template2,
  #template3 {
    width: 816px;
    height: 1056px;
    font-family: 'Roboto', sans-serif;
    color: #050708;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    position: relative;
  
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  
    p {
      font-size: 16px;
    }
  
    a {
      text-decoration: none;
      color: inherit;
    }
  
    main {
      position: relative;
      display: block;
    }
  
    main &gt; * {
      margin-bottom: 5%;
    }
  
    .title {
      font-size: 116px;
      font-family: $font-heading;
      font-weight: 400;
      text-transform: uppercase;
      line-height: 0.9;
    }
  
    .name {
      font-family: $font-heading;
      font-size: 48px;
      font-weight: normal;
      text-transform: uppercase;
      line-height: 1;
    }
  
    .invite {
      font-size: 20px;
    }
  
    .location &gt; strong {
      font-size: 20px;
    }
  
    .waiver {
      display: inline-block;
      background: $orange;
      padding: 12px;
      color: white;
      text-transform: uppercase;
      font-size: 12px;
    }
  
    footer {
      position: absolute;
      width: 100%;
      bottom: 0px;
    }
  
    .logo-wrapper {
      margin-left: auto;
      width: 190px;
      height: 26px;
    }
  
    .legal {
      font-size: 10px;
      line-height: 14px;
    }
  }
  
  #template1 {
    color: white;
  
    a,
    .name,
    .times {
      color: $orange;
    }
  
    main {
      top: 130px;
      left: 54px;
      width: 526px;
      padding: 30px;
      background-color: black;
    }
  
    .waiver {
      margin: 30px 0 10px;
    }
  
    footer {
      padding: 0 54px 30px;
      color: gray;
    }
  }
  
  #template2 {
    a,
    .name,
    .times {
      color: $orange;
    }
  
    main {
      top: 60px;
      left: 280px;
      width: 480px;
      padding: 50px 30px 30px;
      border: 6px solid #f7a93b;
      text-align: center;
    }
  
    .waiver {
      margin-top: 30px;
    }
  
    footer {
      padding: 10px 60px;
    }
  
    .legal {
      text-align: right;
      padding: 10px 0;
    }
  }
  
  #template3 {
    main {
      top: 300px;
      left: 40px;
      width: 480px;
      text-align: center;
    }
  
    main &gt; * {
      margin-bottom: 4%;
    }
  
    .title {
      color: $orange;
      line-height: 0.8;
    }
  
    .times &gt; span {
      margin: 0 10px;
    }
  
    .waiver {
      margin-bottom: 0;
    }
  
    .legal {
      color: darkgray;
      text-align: center;
      padding: 10px 60px;
    }
  
    footer {
      padding: 24px 40px;
    }
  }
  </code></pre>
  <p>Code to render the PDF from the HTML template:</p>
  <pre><code>def render_html
    I18n.locale = locale.presence || I18n.default_locale
    # code from https://github.com/mileszs/wicked_pdf/wiki/Background-PDF-creation-via-delayed_job-gem
    av = ActionView::Base.new
    av.view_paths = ActionController::Base.view_paths
    av.class_eval do
      include Rails.application.routes.url_helpers
      include AddressHelper
    end
    av.render template: &quot;site/locations/pdfs/#{template}&quot;, locals: data
  end
  
  def create_pdf
    t = Tempfile.new([&quot;#{template}-&quot;, '.pdf'], Rails.root.join('tmp'))
    t.binmode
    pdf = WickedPdf.new.pdf_from_string(render_html,
        encoding: &quot;UTF-8&quot;, page_size: 'Letter', margin: { top: 0, bottom: 0, left: 0, right: 0 }
      )
    t.write(pdf)
    t.rewind
    self.pdf = t
    t.close!
  end
  </code></pre>
  <p><a href="https://d3qlyn3oeazit.cloudfront.net/development/PdfGenerationJob/320556/pdf/digital_invitation_3-20211012-43175-1uxsae6.pdf" rel="nofollow noreferrer">This</a> is an example of what got created. The image is tiny and there's a lot of white space. How do I make it fill the entire PDF?</p>