HTML input element not taking 100% width
<p>My angular code <a href="https://github.com/Fred-J/students.git" rel="noreferrer">on gitHub </a>is using ngRoute, where the page1.html gets loaded in ngView.  </p>

<p>I have input element in page1.html with its css set to 100% thus is expected to fill the width of the view but it is only taking about 70% or so. </p>

<p>If the main element width set to 100%, the footer buttons disappear, image 2.
Not sure why? Thanks
<a href="https://i.stack.imgur.com/d7kIv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/d7kIv.png" alt="enter image description here"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    height: 1%;
}

header &gt; button {
    height: 1.5em;
    width: 1.5em;
    font-size: 1.5em;
    top: 0;
}

label.pageTitle {
    display: inline-block;
    width: calc(100% - 5em);
    text-align: center;
}

header {
    border-bottom: 1px solid black;
    width: 100%;
    position: fixed;
    top: 0;
}

main, .mainMenu {
    position: absolute;
    top: 2.5em;
}

main {
    z-index: -2;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

footer &gt; button {
    font-size: 1em;
    padding: 0.5em 1em;

}
input {
    font-size: 1em;
    padding: 0.25em;
    margin: 0.25em;
    width: 100%;
}

header, footer {
    background-color: white;
}

.horizontal-style {
    display: table;
    width: 100%
}
.horizontal-style li {
    display: table-cell;
    padding: 2px;
}
.horizontal-style button {
    display: block;
    border: 1px solid black;
    text-align: center;
    background: #dfdfdf;
}

footer button {
    width: 100%;
    border-radius: 6px;
    font-size: 1.5em;
}

.mainMenu {
    padding-left: 1em;
    background-color: #dfdfdf;
    width: 70%;
    border-radius: 0 6px 10px 0;
}

ul {
    list-style-type: none;
}

ul li img {
    vertical-align: middle;
    padding-right: 0.25em;
}

a {
    display: block;
    padding: 1em 0em;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>//   page1.html
&lt;section&gt;
    &lt;input type="text" placeholder="page1-input1"&gt;
&lt;/section&gt;

//   index.html

&lt;!doctype html&gt;
&lt;html lang="en" ng-app="appModule"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel="stylesheet" href="index.css"&gt;
    &lt;meta name="viewport" content="width=device-width" /&gt;

    &lt;base href="http://localhost:63342/students/"&gt;

    &lt;!--&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"&gt;&lt;/script&gt;--&gt;
    &lt;!--&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"&gt;&lt;/script&gt;--&gt;
    &lt;script src="angular.js"&gt;&lt;/script&gt;
    &lt;script src="angular-route.js"&gt;&lt;/script&gt;

    &lt;script src="app.js"&gt;&lt;/script&gt;

    &lt;script src="services/routing.js"&gt;&lt;/script&gt;
    &lt;script src="services/menuToggle.js"&gt;&lt;/script&gt;

    &lt;script src="controllers/menuToggleCtrl.js"&gt;&lt;/script&gt;
    &lt;script src="controllers/mainMenuCtrl.js"&gt;&lt;/script&gt;
    &lt;script src="controllers/page1Ctrl.js"&gt;&lt;/script&gt;
    &lt;script src="controllers/page2Ctrl.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;header ng-controller="MenuToggleCtrl"&gt;
    &lt;button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()"&gt;&amp;#9776;&lt;/button&gt;
    &lt;label id="pageTitle" class="pageTitle"&gt;Select item from list&lt;/label&gt;
    &lt;button class="menuRight" type="button"&gt;&amp;#8942;&lt;/button&gt;
&lt;/header&gt;

&lt;section class="mainMenu" ng-controller="MainMenuCtrl" ng-if="!clicked"&gt;
    &lt;ul&gt;
        &lt;li ng-repeat="item in menuItems"&gt;
            &lt;a href="#/{{item.name}}"&gt;
                &lt;image ng-src="images/{{item.image}}.png"&gt;&lt;/image&gt;
                {{item.name}}
            &lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/section&gt;

&lt;main ng-view&gt;&lt;/main&gt;

&lt;footer ng-controller="MenuToggleCtrl" ng-if="clicked"&gt;
    &lt;ul class="horizontal-style"&gt;
        &lt;li&gt;&lt;button type="button"&gt;NO&lt;/button&gt;&lt;/li&gt;
        &lt;li&gt;&lt;button type="button"&gt;EXTRA&lt;/button&gt;&lt;/li&gt;
        &lt;li&gt;&lt;button type="button"&gt;YES&lt;/button&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/footer&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>