Skip to main content
agregando problema de diseño responsivo
Origen Enlace
JuankGlezz
  • 5.6k
  • 10
  • 34
  • 59

Ahora para que el menú quede ordenado en forma de listado, el mismo archivo mencionado arriba realiza cambios no deseados, solo hay que sobre escribir la regla únicamente para los dispositivos móviles por lo tanto agregaremos media queries, quedando de la siguiente forma:

@media (max-width: 768px) {
  /* establecemos que solo se aplicara para dispositivos móviles */
  .navbar .nav>linav > li {
    float: none;
  }
}
* {
  box-sizing: border-box;
}

.title {
  font-family: 'Lobster Two', cursive;
  font-size: 36px;
  color: darkorange;
}

.title a:link {
  color: darkorange;
}

.title a:visited {
  color: darkorange;
}

.title a:hover {
  color: darkorange;
}

.title a:active {
  color: darkorange;
}

#menud {
  color: darkorange;
  font-family: 'Lobster Two', cursive;
  font-size: 16px;
}

.container-fluid {
  width: 95%;
}

.inicio {
  margin-top: 20px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

#exampleInputAmount {
  margin-left: 5%;
  width: 50%;
}

.container {
  margin-top: 0px;
  width: auto;
  line-height: 0px;
}

.clasificacion {
  padding-left: 30px;
}

.form-control {
  width: 30%;
}

.product-box__item img {
  width: 100%;
  height: 100%;
}

.product-box__item p {
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  line-height: 15px;
}

.caption {
  padding-top: 10px;
}

.final {
  background-color: Snow;
  display: flex;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding-top: 10px;
  padding-right: 0px;
  padding-left: 10%;
  padding-bottom: 10px;
}

.final p {
  margin-top: 20px;
  line-height: 10px;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
}

.final1 {
  display: none;
}

#exampleInputAmount {
  width: 30%;
}

#barra {
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 0px;
  margin-top: 0px;
}

#barra2 {
  font-size: 19px;
  font-family: 'Roboto', sans-serif;
  color: black;
}

.product-box__item .thumbnail {
  min-height: 400px;
}

@media (min-width: 651px) and (max-width: 1000px) {
  #barra {
    display: none;
  }
  .raya {
    display: none;
  }
  #exampleInputAmount {
    display: none;
  }
  #exampleInputAmount1 {
    display: none;
  }
}

@media (max-width: 650px) {
  #barra {
    display: none;
  }
  .raya {
    display: none;
  }
  #exampleInputAmount {
    display: none;
  }
  #exampleInputAmount1 {
    display: none;
  }
  #left {
    padding-right: 20%;
    padding-left: 20%;
  }
  .todas {
    display: none;
  }
  .final {
    display: none;
  }
  .final1 {
    display: inline;
  }
  .final1 {
    background-color: Snow;
    display: flex;
    width: auto;
    height: auto;
    margin: 0px 0px 0px 0px;
    padding-top: 10px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 10px;
    line-height: 0px;
  }
  .final1 p {
    margin-top: 20px;
    line-height: 10px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

  <title>HeyYeahPixel</title>
  <link rel="shortcut icon" href="./images/logo.png">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700i" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">

  <link href="tools/style.css" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
  <style>
    body {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
    
    @media (max-width: 768px) {
      .navbar .nav>li {
        float: none;
      }
    }
  </style>

</head>

<body>

  <div class="normal_header">
    <nav class="navbar navbar-inverse">
      <div class="container-fluid inicio">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-toggler title" style="font-size:36px" href="#">HeyYeahPixel</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <input type="text" class="form form-inline" id="exampleInputAmount" placeholder="Busca articulos">
          <button type="submit" class="btn btn-warning" id="exampleInputAmount1">Buscar</button>
          <ul class="nav navbar-nav navbar-right">
            <li><a id="menud" href="#"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>Canasta</a></li>
            <li><a id="menud" href="#">Registrarse</a></li>
            <li><a id="menud" href="#">Entrar</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
  <div id="barra">
    <div class="container">

      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" id="barra2" data-toggle="dropdown">VideoGames</b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Metroid</a></li>
            <li><a href="#">Super Mario</a></li>
            <li><a href="#">Megaman</a></li>
            <li><a href="#">Kirby</a></li>
            <li><a href="#">Space Invaders</a></li>
            <li><a href="#">Horda - Wow</a></li>
            <li class="divider"></li>
            <li><a href="#">Otros</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" id="barra2" data-toggle="dropdown">Marvel</a>
          <ul class="dropdown-menu">
            <li><a href="#">Ironman</a></li>
            <li><a href="#">Deadpool</a></li>
            <li class="divider"></li>
            <li><a href="#">Otros</a></li>
          </ul>
        </li>
      </ul>

    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
  </div>
  <!--  end navbar -->
  <hr class="raya" />

  <div class="container cuerpo">
    <h5><small>Inicio (Articulos)</small></h5>
    <h4 class="todas"><strong>Todas las Categorías</strong></h4>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3" id="left">
      <div class="panel panel-default" style="line-height:0px">
        <div class="panel-body"><strong>Todas las categorias</strong></div>
        <div class="panel-body clasificacion">VideoGames</div>
        <div class="panel-body clasificacion">Marvel</div>
      </div>
    </div>
    <div class="row col-xs-7 col-sm-8 col-md-9 col-lg-9">
      <div class="row product-box" id="products">
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 product-box__item">
          <div class="rounded">
            <img src="./images/videogames.jpg" alt="...">
            <div class="caption">
              <p><strong>VideoGames</strong></p>
              <p>Metroid</p>
              <p>Super Mario</p>
              <p>Megaman</p>
              <p>Kirby</p>
              <p>Space Invaders</p>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 product-box__item">
          <div class="rounded">
            <img src="./images/marvel.jpg" alt="...">
            <div class="caption">
              <p><strong>Marvel</strong></p>
              <p>Ironman</p>
              <p>Deadpool</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>
  <hr width=100% class="final" />


  <div class="final">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Únete a la comunidad</strong></p>
      <p>Grupos</p>
      <p>Foros</p>
      <p>Próximos eventos</p>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Descubre y compra</strong></p>
      <p>Blog</p>
      <p>Buscar</p>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Conócenos</strong></p>
      <p>Presentación</p>
      <p>Políticas</p>
      <p>Desarrolladores</p>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Siguenos</strong></p>
      <p><a href="" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i>     Facebook</a></p>
      <p><a href="" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i>     Pinterest</a></p>
      <p><a href="https://www.instagram.com/heyyeahpixel/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i>     Instagram</a></p>
    </div>
  </div>

  <div class="final1">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <p><strong>Siguenos</strong></p>
      <p><a href="" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i>     Facebook</a></p>
      <p><a href="" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i>     Pinterest</a></p>
      <p><a href="https://www.instagram.com/heyyeahpixel/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i>     Instagram</a></p>

    </div>

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

Ahora para que el menú quede ordenado en forma de listado, el mismo archivo mencionado arriba realiza cambios no deseados, solo hay que sobre escribir la regla quedando de la siguiente forma:

.navbar .nav>li {
  float: none;
}
* {
  box-sizing: border-box;
}

.title {
  font-family: 'Lobster Two', cursive;
  font-size: 36px;
  color: darkorange;
}

.title a:link {
  color: darkorange;
}

.title a:visited {
  color: darkorange;
}

.title a:hover {
  color: darkorange;
}

.title a:active {
  color: darkorange;
}

#menud {
  color: darkorange;
  font-family: 'Lobster Two', cursive;
  font-size: 16px;
}

.container-fluid {
  width: 95%;
}

.inicio {
  margin-top: 20px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

#exampleInputAmount {
  margin-left: 5%;
  width: 50%;
}

.container {
  margin-top: 0px;
  width: auto;
  line-height: 0px;
}

.clasificacion {
  padding-left: 30px;
}

.form-control {
  width: 30%;
}

.product-box__item img {
  width: 100%;
  height: 100%;
}

.product-box__item p {
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  line-height: 15px;
}

.caption {
  padding-top: 10px;
}

.final {
  background-color: Snow;
  display: flex;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding-top: 10px;
  padding-right: 0px;
  padding-left: 10%;
  padding-bottom: 10px;
}

.final p {
  margin-top: 20px;
  line-height: 10px;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
}

.final1 {
  display: none;
}

#exampleInputAmount {
  width: 30%;
}

#barra {
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 0px;
  margin-top: 0px;
}

#barra2 {
  font-size: 19px;
  font-family: 'Roboto', sans-serif;
  color: black;
}

.product-box__item .thumbnail {
  min-height: 400px;
}

@media (min-width: 651px) and (max-width: 1000px) {
  #barra {
    display: none;
  }
  .raya {
    display: none;
  }
  #exampleInputAmount {
    display: none;
  }
  #exampleInputAmount1 {
    display: none;
  }
}

@media (max-width: 650px) {
  #barra {
    display: none;
  }
  .raya {
    display: none;
  }
  #exampleInputAmount {
    display: none;
  }
  #exampleInputAmount1 {
    display: none;
  }
  #left {
    padding-right: 20%;
    padding-left: 20%;
  }
  .todas {
    display: none;
  }
  .final {
    display: none;
  }
  .final1 {
    display: inline;
  }
  .final1 {
    background-color: Snow;
    display: flex;
    width: auto;
    height: auto;
    margin: 0px 0px 0px 0px;
    padding-top: 10px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 10px;
    line-height: 0px;
  }
  .final1 p {
    margin-top: 20px;
    line-height: 10px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

  <title>HeyYeahPixel</title>
  <link rel="shortcut icon" href="./images/logo.png">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700i" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">

  <link href="tools/style.css" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
  <style>
    body {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
    
    .navbar .nav>li {
      float: none;
    }
  </style>

</head>

<body>

  <div class="normal_header">
    <nav class="navbar navbar-inverse">
      <div class="container-fluid inicio">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-toggler title" style="font-size:36px" href="#">HeyYeahPixel</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <input type="text" class="form form-inline" id="exampleInputAmount" placeholder="Busca articulos">
          <button type="submit" class="btn btn-warning" id="exampleInputAmount1">Buscar</button>
          <ul class="nav navbar-nav navbar-right">
            <li><a id="menud" href="#"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>Canasta</a></li>
            <li><a id="menud" href="#">Registrarse</a></li>
            <li><a id="menud" href="#">Entrar</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
  <div id="barra">
    <div class="container">

      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" id="barra2" data-toggle="dropdown">VideoGames</b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Metroid</a></li>
            <li><a href="#">Super Mario</a></li>
            <li><a href="#">Megaman</a></li>
            <li><a href="#">Kirby</a></li>
            <li><a href="#">Space Invaders</a></li>
            <li><a href="#">Horda - Wow</a></li>
            <li class="divider"></li>
            <li><a href="#">Otros</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" id="barra2" data-toggle="dropdown">Marvel</a>
          <ul class="dropdown-menu">
            <li><a href="#">Ironman</a></li>
            <li><a href="#">Deadpool</a></li>
            <li class="divider"></li>
            <li><a href="#">Otros</a></li>
          </ul>
        </li>
      </ul>

    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
  </div>
  <!--  end navbar -->
  <hr class="raya" />

  <div class="container cuerpo">
    <h5><small>Inicio (Articulos)</small></h5>
    <h4 class="todas"><strong>Todas las Categorías</strong></h4>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3" id="left">
      <div class="panel panel-default" style="line-height:0px">
        <div class="panel-body"><strong>Todas las categorias</strong></div>
        <div class="panel-body clasificacion">VideoGames</div>
        <div class="panel-body clasificacion">Marvel</div>
      </div>
    </div>
    <div class="row col-xs-7 col-sm-8 col-md-9 col-lg-9">
      <div class="row product-box" id="products">
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 product-box__item">
          <div class="rounded">
            <img src="./images/videogames.jpg" alt="...">
            <div class="caption">
              <p><strong>VideoGames</strong></p>
              <p>Metroid</p>
              <p>Super Mario</p>
              <p>Megaman</p>
              <p>Kirby</p>
              <p>Space Invaders</p>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 product-box__item">
          <div class="rounded">
            <img src="./images/marvel.jpg" alt="...">
            <div class="caption">
              <p><strong>Marvel</strong></p>
              <p>Ironman</p>
              <p>Deadpool</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>
  <hr width=100% class="final" />


  <div class="final">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Únete a la comunidad</strong></p>
      <p>Grupos</p>
      <p>Foros</p>
      <p>Próximos eventos</p>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Descubre y compra</strong></p>
      <p>Blog</p>
      <p>Buscar</p>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Conócenos</strong></p>
      <p>Presentación</p>
      <p>Políticas</p>
      <p>Desarrolladores</p>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Siguenos</strong></p>
      <p><a href="" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i>     Facebook</a></p>
      <p><a href="" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i>     Pinterest</a></p>
      <p><a href="https://www.instagram.com/heyyeahpixel/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i>     Instagram</a></p>
    </div>
  </div>

  <div class="final1">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <p><strong>Siguenos</strong></p>
      <p><a href="" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i>     Facebook</a></p>
      <p><a href="" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i>     Pinterest</a></p>
      <p><a href="https://www.instagram.com/heyyeahpixel/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i>     Instagram</a></p>

    </div>

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

Ahora para que el menú quede ordenado en forma de listado, el mismo archivo mencionado arriba realiza cambios no deseados, solo hay que sobre escribir la regla únicamente para los dispositivos móviles por lo tanto agregaremos media queries, quedando de la siguiente forma:

@media (max-width: 768px) {
  /* establecemos que solo se aplicara para dispositivos móviles */
  .navbar .nav > li {
    float: none;
  }
}
* {
  box-sizing: border-box;
}

.title {
  font-family: 'Lobster Two', cursive;
  font-size: 36px;
  color: darkorange;
}

.title a:link {
  color: darkorange;
}

.title a:visited {
  color: darkorange;
}

.title a:hover {
  color: darkorange;
}

.title a:active {
  color: darkorange;
}

#menud {
  color: darkorange;
  font-family: 'Lobster Two', cursive;
  font-size: 16px;
}

.container-fluid {
  width: 95%;
}

.inicio {
  margin-top: 20px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

#exampleInputAmount {
  margin-left: 5%;
  width: 50%;
}

.container {
  margin-top: 0px;
  width: auto;
  line-height: 0px;
}

.clasificacion {
  padding-left: 30px;
}

.form-control {
  width: 30%;
}

.product-box__item img {
  width: 100%;
  height: 100%;
}

.product-box__item p {
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  line-height: 15px;
}

.caption {
  padding-top: 10px;
}

.final {
  background-color: Snow;
  display: flex;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding-top: 10px;
  padding-right: 0px;
  padding-left: 10%;
  padding-bottom: 10px;
}

.final p {
  margin-top: 20px;
  line-height: 10px;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
}

.final1 {
  display: none;
}

#exampleInputAmount {
  width: 30%;
}

#barra {
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 0px;
  margin-top: 0px;
}

#barra2 {
  font-size: 19px;
  font-family: 'Roboto', sans-serif;
  color: black;
}

.product-box__item .thumbnail {
  min-height: 400px;
}

@media (min-width: 651px) and (max-width: 1000px) {
  #barra {
    display: none;
  }
  .raya {
    display: none;
  }
  #exampleInputAmount {
    display: none;
  }
  #exampleInputAmount1 {
    display: none;
  }
}

@media (max-width: 650px) {
  #barra {
    display: none;
  }
  .raya {
    display: none;
  }
  #exampleInputAmount {
    display: none;
  }
  #exampleInputAmount1 {
    display: none;
  }
  #left {
    padding-right: 20%;
    padding-left: 20%;
  }
  .todas {
    display: none;
  }
  .final {
    display: none;
  }
  .final1 {
    display: inline;
  }
  .final1 {
    background-color: Snow;
    display: flex;
    width: auto;
    height: auto;
    margin: 0px 0px 0px 0px;
    padding-top: 10px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 10px;
    line-height: 0px;
  }
  .final1 p {
    margin-top: 20px;
    line-height: 10px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

  <title>HeyYeahPixel</title>
  <link rel="shortcut icon" href="./images/logo.png">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700i" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">

  <link href="tools/style.css" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
  <style>
    body {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
    
    @media (max-width: 768px) {
      .navbar .nav>li {
        float: none;
      }
    }
  </style>

</head>

<body>

  <div class="normal_header">
    <nav class="navbar navbar-inverse">
      <div class="container-fluid inicio">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-toggler title" style="font-size:36px" href="#">HeyYeahPixel</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <input type="text" class="form form-inline" id="exampleInputAmount" placeholder="Busca articulos">
          <button type="submit" class="btn btn-warning" id="exampleInputAmount1">Buscar</button>
          <ul class="nav navbar-nav navbar-right">
            <li><a id="menud" href="#"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>Canasta</a></li>
            <li><a id="menud" href="#">Registrarse</a></li>
            <li><a id="menud" href="#">Entrar</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
  <div id="barra">
    <div class="container">

      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" id="barra2" data-toggle="dropdown">VideoGames</b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Metroid</a></li>
            <li><a href="#">Super Mario</a></li>
            <li><a href="#">Megaman</a></li>
            <li><a href="#">Kirby</a></li>
            <li><a href="#">Space Invaders</a></li>
            <li><a href="#">Horda - Wow</a></li>
            <li class="divider"></li>
            <li><a href="#">Otros</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" id="barra2" data-toggle="dropdown">Marvel</a>
          <ul class="dropdown-menu">
            <li><a href="#">Ironman</a></li>
            <li><a href="#">Deadpool</a></li>
            <li class="divider"></li>
            <li><a href="#">Otros</a></li>
          </ul>
        </li>
      </ul>

    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
  </div>
  <!--  end navbar -->
  <hr class="raya" />

  <div class="container cuerpo">
    <h5><small>Inicio (Articulos)</small></h5>
    <h4 class="todas"><strong>Todas las Categorías</strong></h4>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3" id="left">
      <div class="panel panel-default" style="line-height:0px">
        <div class="panel-body"><strong>Todas las categorias</strong></div>
        <div class="panel-body clasificacion">VideoGames</div>
        <div class="panel-body clasificacion">Marvel</div>
      </div>
    </div>
    <div class="row col-xs-7 col-sm-8 col-md-9 col-lg-9">
      <div class="row product-box" id="products">
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 product-box__item">
          <div class="rounded">
            <img src="./images/videogames.jpg" alt="...">
            <div class="caption">
              <p><strong>VideoGames</strong></p>
              <p>Metroid</p>
              <p>Super Mario</p>
              <p>Megaman</p>
              <p>Kirby</p>
              <p>Space Invaders</p>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 product-box__item">
          <div class="rounded">
            <img src="./images/marvel.jpg" alt="...">
            <div class="caption">
              <p><strong>Marvel</strong></p>
              <p>Ironman</p>
              <p>Deadpool</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>
  <hr width=100% class="final" />


  <div class="final">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Únete a la comunidad</strong></p>
      <p>Grupos</p>
      <p>Foros</p>
      <p>Próximos eventos</p>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Descubre y compra</strong></p>
      <p>Blog</p>
      <p>Buscar</p>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Conócenos</strong></p>
      <p>Presentación</p>
      <p>Políticas</p>
      <p>Desarrolladores</p>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Siguenos</strong></p>
      <p><a href="" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i>     Facebook</a></p>
      <p><a href="" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i>     Pinterest</a></p>
      <p><a href="https://www.instagram.com/heyyeahpixel/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i>     Instagram</a></p>
    </div>
  </div>

  <div class="final1">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <p><strong>Siguenos</strong></p>
      <p><a href="" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i>     Facebook</a></p>
      <p><a href="" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i>     Pinterest</a></p>
      <p><a href="https://www.instagram.com/heyyeahpixel/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i>     Instagram</a></p>

    </div>

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>
Origen Enlace
JuankGlezz
  • 5.6k
  • 10
  • 34
  • 59

Abriendo el inspector de elementos veo que se le aplica un padding-left y padding-right de 20px dentro de @media (max-width: 767px), esta condición se encuentra en el archivo https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css.

Lo que puedes hacer para sobrescribir esa condición seria colocar una nueva regla marcada como !important esta regla la puedes colocar antes del cierre del head

body {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

Ahora para que el menú quede ordenado en forma de listado, el mismo archivo mencionado arriba realiza cambios no deseados, solo hay que sobre escribir la regla quedando de la siguiente forma:

.navbar .nav>li {
  float: none;
}

Te dejo tu ejemplo con los cambios realizados

* {
  box-sizing: border-box;
}

.title {
  font-family: 'Lobster Two', cursive;
  font-size: 36px;
  color: darkorange;
}

.title a:link {
  color: darkorange;
}

.title a:visited {
  color: darkorange;
}

.title a:hover {
  color: darkorange;
}

.title a:active {
  color: darkorange;
}

#menud {
  color: darkorange;
  font-family: 'Lobster Two', cursive;
  font-size: 16px;
}

.container-fluid {
  width: 95%;
}

.inicio {
  margin-top: 20px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

#exampleInputAmount {
  margin-left: 5%;
  width: 50%;
}

.container {
  margin-top: 0px;
  width: auto;
  line-height: 0px;
}

.clasificacion {
  padding-left: 30px;
}

.form-control {
  width: 30%;
}

.product-box__item img {
  width: 100%;
  height: 100%;
}

.product-box__item p {
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  line-height: 15px;
}

.caption {
  padding-top: 10px;
}

.final {
  background-color: Snow;
  display: flex;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding-top: 10px;
  padding-right: 0px;
  padding-left: 10%;
  padding-bottom: 10px;
}

.final p {
  margin-top: 20px;
  line-height: 10px;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
}

.final1 {
  display: none;
}

#exampleInputAmount {
  width: 30%;
}

#barra {
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 0px;
  margin-top: 0px;
}

#barra2 {
  font-size: 19px;
  font-family: 'Roboto', sans-serif;
  color: black;
}

.product-box__item .thumbnail {
  min-height: 400px;
}

@media (min-width: 651px) and (max-width: 1000px) {
  #barra {
    display: none;
  }
  .raya {
    display: none;
  }
  #exampleInputAmount {
    display: none;
  }
  #exampleInputAmount1 {
    display: none;
  }
}

@media (max-width: 650px) {
  #barra {
    display: none;
  }
  .raya {
    display: none;
  }
  #exampleInputAmount {
    display: none;
  }
  #exampleInputAmount1 {
    display: none;
  }
  #left {
    padding-right: 20%;
    padding-left: 20%;
  }
  .todas {
    display: none;
  }
  .final {
    display: none;
  }
  .final1 {
    display: inline;
  }
  .final1 {
    background-color: Snow;
    display: flex;
    width: auto;
    height: auto;
    margin: 0px 0px 0px 0px;
    padding-top: 10px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 10px;
    line-height: 0px;
  }
  .final1 p {
    margin-top: 20px;
    line-height: 10px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

  <title>HeyYeahPixel</title>
  <link rel="shortcut icon" href="./images/logo.png">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700i" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">

  <link href="tools/style.css" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
  <style>
    body {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
    
    .navbar .nav>li {
      float: none;
    }
  </style>

</head>

<body>

  <div class="normal_header">
    <nav class="navbar navbar-inverse">
      <div class="container-fluid inicio">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-toggler title" style="font-size:36px" href="#">HeyYeahPixel</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <input type="text" class="form form-inline" id="exampleInputAmount" placeholder="Busca articulos">
          <button type="submit" class="btn btn-warning" id="exampleInputAmount1">Buscar</button>
          <ul class="nav navbar-nav navbar-right">
            <li><a id="menud" href="#"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>Canasta</a></li>
            <li><a id="menud" href="#">Registrarse</a></li>
            <li><a id="menud" href="#">Entrar</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
  <div id="barra">
    <div class="container">

      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" id="barra2" data-toggle="dropdown">VideoGames</b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Metroid</a></li>
            <li><a href="#">Super Mario</a></li>
            <li><a href="#">Megaman</a></li>
            <li><a href="#">Kirby</a></li>
            <li><a href="#">Space Invaders</a></li>
            <li><a href="#">Horda - Wow</a></li>
            <li class="divider"></li>
            <li><a href="#">Otros</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" id="barra2" data-toggle="dropdown">Marvel</a>
          <ul class="dropdown-menu">
            <li><a href="#">Ironman</a></li>
            <li><a href="#">Deadpool</a></li>
            <li class="divider"></li>
            <li><a href="#">Otros</a></li>
          </ul>
        </li>
      </ul>

    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
  </div>
  <!--  end navbar -->
  <hr class="raya" />

  <div class="container cuerpo">
    <h5><small>Inicio (Articulos)</small></h5>
    <h4 class="todas"><strong>Todas las Categorías</strong></h4>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3" id="left">
      <div class="panel panel-default" style="line-height:0px">
        <div class="panel-body"><strong>Todas las categorias</strong></div>
        <div class="panel-body clasificacion">VideoGames</div>
        <div class="panel-body clasificacion">Marvel</div>
      </div>
    </div>
    <div class="row col-xs-7 col-sm-8 col-md-9 col-lg-9">
      <div class="row product-box" id="products">
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 product-box__item">
          <div class="rounded">
            <img src="./images/videogames.jpg" alt="...">
            <div class="caption">
              <p><strong>VideoGames</strong></p>
              <p>Metroid</p>
              <p>Super Mario</p>
              <p>Megaman</p>
              <p>Kirby</p>
              <p>Space Invaders</p>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 product-box__item">
          <div class="rounded">
            <img src="./images/marvel.jpg" alt="...">
            <div class="caption">
              <p><strong>Marvel</strong></p>
              <p>Ironman</p>
              <p>Deadpool</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>
  <hr width=100% class="final" />


  <div class="final">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Únete a la comunidad</strong></p>
      <p>Grupos</p>
      <p>Foros</p>
      <p>Próximos eventos</p>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Descubre y compra</strong></p>
      <p>Blog</p>
      <p>Buscar</p>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Conócenos</strong></p>
      <p>Presentación</p>
      <p>Políticas</p>
      <p>Desarrolladores</p>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <p><strong>Siguenos</strong></p>
      <p><a href="" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i>     Facebook</a></p>
      <p><a href="" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i>     Pinterest</a></p>
      <p><a href="https://www.instagram.com/heyyeahpixel/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i>     Instagram</a></p>
    </div>
  </div>

  <div class="final1">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <p><strong>Siguenos</strong></p>
      <p><a href="" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i>     Facebook</a></p>
      <p><a href="" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i>     Pinterest</a></p>
      <p><a href="https://www.instagram.com/heyyeahpixel/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i>     Instagram</a></p>

    </div>

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>