Home>

As shown in the image below
I want to extend the input part to the full column.

The problem i am having

As shown in the image below, it does not extend to the full column and remains short.

Corresponding source code
<! doctype html>
<html>
<head>
  <!-Required meta tags->
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
  <!-Bootstrap CSS->
  <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
          integrity = "sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" cross origin = "anonymous">
  <link href = "https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel = "stylesheet">
  <link rel = "stylesheet" type = "text/css" href = "/ static/css/style.css">
  <title>Freelanze --Top page</title>
</head>
<body>
<!-Navibar Design Test->
<nav>
    
        
            
                
                Hogehoge
            
          <button type = "button" data-toggle = "collapse" data-target = "# navbarSupportedContent" aria-controls = "navbarSupportedContent" aria-expanded = "false" aria-label = "Toggle navigation">
              <span></span>
          </button>
        
        
            
              <button type = "button">test</button>
              <button type = "button">Login</button>
              <button type = "button">Membership registration</button>
            
        
        
            
              <form action = "/ search" method = "get" accept-charset = "utf-8">
                    
                      <input type = "search" placeholder = "Search by keyword" name = "q" aria-label = "Search ...">
                    
                  <button type = "submit">Search</button>
              </form>
            
        
        
          <button type = "button">Category</button>
        
    
</nav>
<main>
</main>
<!-Optional JavaScript->
<!-JQuery first, then Popper.js, then Bootstrap JS->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity = "sha384-q8i/X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6jizo"
        crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
        integrity = "sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY // 20VyM2taTB4QvJ"
        crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
        integrity = "sha384-uefMccjFJAIv6A + rW + L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
        crossorigin = "anonymous"></script>
</body>
</html>
What I tried

I tried to add style to the input part of the html code and control it with wibbs by css, but it didn't work.