<p>I'm using nginx in a docker container which is serving out static content. It's run in Kubernetes as a sidecar to another service in the same file.</p>
<p>However, the issue is that although the same exact HTML page is being served (I checked using a text comparer) the page looks malformed on the web server (but fine when I render it locally)</p>
<p>So because of this, it makes me think that there is an issue with serving some of the css, js, or image files</p>
<p>Here's part of the Kubernetes deployment</p>
<pre><code>containers:
      - image: &lt;OTHER IMAGE&gt;
        imagePullPolicy: Always
        name: &lt;imagename&gt;
        ports:
        - containerPort: 8888
      - image: &lt;MY NGINX IMAGE&gt;
        imagePullPolicy: Always
        name: &lt;imagename&gt;
        ports:
        - containerPort: 80
        - containerPort: 443
      restartPolicy: Always
</code></pre>
<p><a href="https://paste.mod.gg/isivicazeg.nginx" rel="nofollow noreferrer">The nginx file</a></p>
<p><a href="https://paste.mod.gg/tiloxigamu.cpp" rel="nofollow noreferrer">The Dockerfile</a></p>
<p>Here is the file path of the actual proxy (static content in kiwoon-pages)
<a href="https://i.stack.imgur.com/TICqk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TICqk.png" alt="the file paths" /></a></p>
<p>Here is the static content</p>
<p><a href="https://i.stack.imgur.com/rOW3N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rOW3N.png" alt="file paths of static content" /></a></p>
<p>Is there anything that looks glaringly wrong here? Let me know, thanks!</p>

tymur999
<p>Since <strong>@tymur999</strong> has already solved this issue, I decided to provide a Community Wiki answer just for better visibility to other community members.</p>
<p>It's important to know that browsers use the MIME type, to choose a suitable displaying method.
Therefore, the web server must send the correct MIME type in the response's <code>Content-Type</code> header.</p>
<p>In the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types" rel="nofollow noreferrer">MIME types documentation</a>, we can find an important note:</p>
<blockquote>
<p>Important: Browsers use the MIME type, not the file extension, to determine how to process a URL, so it's important that web servers send the correct MIME type in the response's Content-Type header. If this is not correctly configured, browsers are likely to misinterpret the contents of files and sites will not work correctly, and downloaded files may be mishandled.</p>
</blockquote>
<p>In nginx, we can use the <code>types</code> directive to map file name extensions to MIME types of responses (see: <a href="http://nginx.org/en/docs/http/ngx_http_core_module.html#types" rel="nofollow noreferrer">NGINX documentation</a>):</p>
<pre><code>Syntax: types { ... }   
Default:    
types {   
    text/html  html;   
    image/gif  gif;   
    image/jpeg jpg;   
}
</code></pre>
<blockquote>
<p>Context:  http, server, location</p>
</blockquote>
<p><strong>NOTE:</strong> A sufficiently full mapping table is distributed with nginx in the <code>mime.types</code> file.</p>
<hr />
<p>As an example, suppose I have a simple website - a single HTML (<code>index.html</code>) and CSS (<code>mystyle.css</code>) file.</p>
<pre><code>$ ls /var/www/html/
index.html  mystyle.css
$ cat /var/www/html/index.html 
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;mystyle.css&quot;/&gt;
&lt;p&gt;This is a paragraph.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
$ cat /var/www/html/mystyle.css 
body {
  background-color: aquamarine;
}
</code></pre>
<p>Without the correct MIME type for CSS, my website doesn't work as expected:<br />
<strong>NOTE:</strong> The <code>text/css</code> MIME type is commented out.</p>
<pre><code>$ grep -Ri -A 3 &quot;types {&quot; /etc/nginx/nginx.conf 
        types {
                text/html                             html htm shtml;
                # text/css                              css;
        }
</code></pre>
<p><a href="https://i.stack.imgur.com/0K12r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0K12r.png" alt="enter image description here" /></a></p>
<p>When the <code>text/css</code> MIME type is properly included, everything works as expected:</p>
<pre><code>grep -Ri -A 3 &quot;types {&quot; /etc/nginx/nginx.conf 
        types {
                text/html                             html htm shtml;
                text/css                              css;
        }
</code></pre>
<p><a href="https://i.stack.imgur.com/EyALT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EyALT.png" alt="enter image description here" /></a></p>
