title: Jupyter Notebook RISE distorts the HTML/CSS layout of presentation
body: <p>I'm trying to make an entire presentation in Jupyter. I have tried some HTML-CSS in browser first where works almost fine:</p>
  
  <p><strong>HTML</strong> <code>index.html</code>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;title&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="content-wrap"&gt;
          &lt;header&gt;
              &lt;h1 id="firstSlideTitle" class="text"&gt;This is a long miltiline title for a random topic which nobody cares about!&lt;/h1&gt;
              &lt;Lorem&gt;&lt;/Lorem&gt;
          &lt;/header&gt;
          &lt;img src="pics/Python_logo.svg" id="firstSlidePic" alt="PythonLogo" class="center"&gt;
      &lt;/div&gt;
      &lt;footer&gt;
          &lt;hr&gt;
          &lt;img src="pics/by-nc-nd.svg"&gt;
          &lt;p id="twitter" class="text"&gt;&lt;a&gt;&lt;i class="fa fa-twitter"&gt;twitter&lt;/i&gt;&lt;/a&gt;&lt;/p&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>where you can find <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Python_logo_and_wordmark.svg/2000px-Python_logo_and_wordmark.svg.png" rel="nofollow noreferrer">the python logo</a> and <a href="https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nc-sa.eu.svg" rel="nofollow noreferrer">the Creative Commons logo</a>. and the <strong>CSS</strong> <code>style.css</code>:</p>
  
  <pre><code>body {
       position: relative;
       min-height: 90vh;
  }
   #content-wrap {
       padding-bottom: 2.5rem;
  }
   .text {
       font-family: computer Modern;
  }
   #firstSlideTitle {
       width: 80%;
       font-size: 300%;
       font-weight: bold;
       text-align: center;
       margin: auto;
       margin-top: 40px;
       border-style: solid;
       border-radius: 15px;
  }
   #firstSlidePic {
       width: 50%;
       height: auto;
       padding: 40px;
  }
   .center {
       display: block;
       margin-left: auto;
       margin-right: auto;
  }
   footer {
       position: absolute;
       bottom: 0px;
       width: 100%;
       height: 2.5rem;
  }
   #twitter{
       float: right;
       width: 33.3%;
       text-align: right;
  }
  </code></pre>
  
  <p>which the result is almost OK:</p>
  
  <blockquote>
    <p><a href="https://i.stack.imgur.com/cr0Lv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cr0Lv.png" alt="enter image description here"></a>    </p>
  </blockquote>
  
  <p>I tried putting the CSS code inside a <code>&lt;style&gt;...&lt;/style&gt;</code> tag in a code  cell in Jupyter, equipped with <code>%%html</code> magic. Also had to change all the <code>id</code>s to <code>classe</code>s because Python-Jupyter can't handle the <code>#</code>s, considering them as python comments. You can find the cell in <a href="https://gist.github.com/Foadsf/ac6ce69ee88df4a4b088f9df3a91f2f0" rel="nofollow noreferrer">this Github Gist</a>. However, the result is more of a disappointment:</p>
  
  <blockquote>
    <p><a href="https://i.stack.imgur.com/5ueaV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5ueaV.png" alt="enter image description here"></a></p>
  </blockquote>
  
  <p>I have tried some workarounds but none of them are good enough. I would appreciate if you could help me know how to do it.</p>