width of item is fixed`

apps/vyper/src/app/app.css

@@ -49,7 +49,7 @@ html, body, #root, main {
 }
 
 #compile-btn {
-  width: 90%;
+  width: 100%;
 }
 
 #compile-btn * {

apps/vyper/src/app/app.tsx

@@ -83,7 +83,7 @@ const App: React.FC = () => {
         </a>
       </header>
       <section>
-        <div className="px-3 w-100">
+        <div className="px-4 w-100">
           <Button data-id="add-repository" className="w-100 text-dark w-100 bg-light btn-outline-primary " onClick={() => remixClient.cloneVyperRepo()}>
             Clone Vyper examples repository
           </Button>
@@ -107,7 +107,7 @@ const App: React.FC = () => {
           environment={state.environment}
         />
         <WarnRemote environment={state.environment} />
-        <div id="compile-btn">
+        <div className="px-4" id="compile-btn">
           <CompilerButton
             compilerUrl={compilerUrl()}
             contract={contract}

apps/vyper/src/app/components/VyperResult.tsx

@@ -10,7 +10,6 @@ import Button from 'react-bootstrap/Button';
 import JSONTree from 'react-json-view'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 
-
 interface VyperResultProps {
   output?: VyperCompilationOutput;
 }
@@ -27,7 +26,6 @@ function VyperResult({ output }: VyperResultProps) {
 
     <div id="result">
       <p className="my-3">No contract compiled yet.</p>
-      
     </div>
   )
 
@@ -40,7 +38,8 @@ function VyperResult({ output }: VyperResultProps) {
           overflowX: "hidden",
           textOverflow: "ellipsis"
         }}>{output.message}</pre>
-    </div>)
+      </div>
+    )
   }
 
   return (