Add custom search engine to website

html
workspace

#1

I’m having troubles, I can’t add my custom search box to my website.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nav Bar</title>
    <link href="style.CSS" rel="stylesheet" type="text/CSS" />
  </head>

  <body>
    <h1>Logo goes here</h1>
    <div>
      <ul>
         <li class="selected"<a href="#">Inicio</a></li>
         <li><a href="#">Publicar</a></li>
         <li><a href="#">Hogar&Personal</a></li>
         <li><a href="#">Entretenimiento</a></li>
         <li><a href="#">Electronica</a></li>
         <li><a href="#">Bienes&Raíces</a></li>
         <li><a href="#">Servicios</a></li>
         <li><a href="#">Vehículos</a></li>
      </ul>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Mardochee C.Pierre">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Search Box</title>
    <style type="text/css">
        .main{
             width: 100%;

        }
        .search{
          margin: 0;
          padding: 5px 30px;
          font-family: arial,helvetica,sans-serif;
          font-size: 14px;
          border: 1px solid #0076a3;
          border-right: 0;
          border-top-left-radius: 5px 5px;
          border-bottom-left-radius: 5px 5px;
          font-style: italic;
          height: 20px;
        }
        .button{
            padding: 5px 5px;
            font-family: arial,helvetica,sans-serif;
            font-size: 14px
            text-shadow: 0 0 1px #000;
            cursor: pointer;
            text-align: center;
            color: #fff;
            border-right: 0;
            background: linear-gradient(#00adee,#0078a5);
            border-top-right-radius: 5px 5px;
            border-bottom-right-radius: 5px 5px;
            position: absolute;
            height: 32px;
            border: 1px solid #0076a3;
            }
            .button:hover{
                 background: linear-gradient(#0095cc,#00678e);
            }
            .search:focus,.button:focus{
              outline: none;
            }
            #search-box{
              text-align: center;
              margin-top: 50px;
              margin-left: -75px;
            }

  </style>
  </head>
  <body>
      <div class="main"></div>
           <form action="http://www.google.com" method="get" id="search-box">
             <input type="text" class="search" name="q"size="20" maxlength="120"
              placeholder="Buscar lo que tu quieres...">
              <input type="submit" class="button" value="Buscar" >
           </form>
      </div>
  </body>
</html>

#2

What specifically is the problem? When I tried the HTML in Codepen, it worked perfectly:

Are you having trouble linking it to a backend, or is it something else? I did notice some HTML errors, maybe they’re causing problems for you:

<body>
      <div class="main"></div> <!-- Remove this div, there's already one after the form -->
           <form action="http://www.google.com" method="get" id="search-box">
             <input type="text" class="search" name="q" <!-- Add a space between these attributes --> size="20" maxlength="120"
              placeholder="Buscar lo que tu quieres...">
              <input type="submit" class="button" value="Buscar" >
           </form>
      </div>
  </body>