Making Nav Bar responsive when rest of Page is responsive
<p>I am creating a portfolio page for a project on free code camp and I am having trouble with making my Nav bar responsive. It is essentially 2 divs; one for the nav buttons and the other for the background colour and shape. I am new to coding but have stumbled on this hard. I am coding using code pen and here is my code so far.</p>

<p>html</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div id="navigation"&gt;
        &lt;nav&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#Portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
    &lt;/div&gt;

    &lt;div id="Border"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>css</p>

<pre><code>.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
}

#navigation {
    display: block;
    width:300px;
    height: 35px;
    padding:18px 12px;
    position: fixed;
    left: 100px;
    width: 200%;
    z-index: 22222;
    transition: all ease .5s;
}

#Border {
    height: 75px;
    width: 1140px;
    position: fixed;
    background: #8e0e17;
}

li{ 
    display: inline;
    padding: 160px;
}

ul {
    list-style-type: none;
}

nav li a{
    color:grey;
    font-weight:700;
    font-size: 25px;
}
</code></pre>

<p>Please help, thank you.</p>