Może ktoś wytłumaczyć. Znowu mam problem z tym szablonem swoim na eBaya. Mianowicie sytuacja wygląda tak że Szablon jest responsywny do pewnego momentu. Pod koniec zmniejszania szerokości ekranu pojawia się poziomy pasek. Oto kod:


```<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<style>
body {font-family: Calibri, Tahoma; margin: 0;}
.clear {clear: both;}
.container {width: 100%;  margin: 0 auto;}

#topmenu {background: #636363; font-family: "Ubuntu Condensed", Calibri, Tahoma;}
#topmenu .container {margin-top: 30px; padding: 0; width: 90%;}

#topmenu ul > li {display: block; float: left; background: #636363;}
#topmenu ul > li > a {font-size: .9em; padding: 10px; display: block; color: #fff; text-decoration: none; text-align: center;}
#topmenu ul > li > a:hover {background: #212121;}

#logo img { width: 30%; margin: 0 auto;}

.auctionName {
    width: 100%;
    text-align: center;
}

@media (min-width: 1024px) {
    .container {width: 100%;}
    .stopka {width: 100%;}
 }

/*Netbook*/
@media (max-width: 1023px) {
    .container {width: 100%%;}
    

}

/*Tablet*/
@media (max-width: 734px) {
    .container {width: 100%;}
    

}

/*Smartfon*/
@media (max-width: 599px) {
.container {width: 100%;}
#logo {margin: 0 auto; margin-top: 10px; margin-bottom: 10px;}


#topmenu .container {padding: 4px;}
#topmenu ul {display: table; margin: 0 auto; padding: 0; min-width: 100%; margin-left: 0;}
#topmenu ul > li {width: 100%; margin: 0 auto; text-align: center; border-bottom: 1px gray solid;}
#topmenu ul > li:last-child {border: 0;}
#topmenu ul > li > a {font-size: 1.1em; padding: 12px;}
 }

.Image img {
    width: 300px;
    float: left;

}
.description {
    float: left;
    width: 500px;
    height: auto;
    margin-left: 5%;
}

.container-fluid {
    background-color: grey;
}
.row1 {float:left; width:25%; text-align: center; background-color: grey; color: white; font-size: 16px; padding-bottom: 20px;}
.row2 {float:left; width:25%; text-align: center; background-color: grey; color: white; font-size: 16px; padding-bottom: 20px;}
.row3 {float:left; width:25%; text-align: center; background-color: grey; color: white; font-size: 16px; padding-bottom: 20px;}
.row4 {float:left; width:25%; text-align: center; background-color: grey; color: white; font-size: 16px; padding-bottom: 20px;}

.row { background-color: grey; }

.stopka { background-color: grey; }
</style>

</head>

<body>

<!-- Logo -->
<div id="top">
<div class="container">
<div id="logo" align="center"><img src="https://idekoshop.pl/shoplogo.png"></div>
<div class="clear: both"></div>
</div>
</div>

<!-- Menu -->
<div id="topmenu">
<div class="container">
<ul>
    <li><a href="https://stores.ebay.de/caraccessoiresgsc" target="_blank">eBay Shop</a></li>
    <li><a href="https://feedback.ebay.de/ws/eBayISAPI.dll?ViewFeedback2&userid=gsconsulting" target="_blank">Bursegungprofil</a></li>
    <li><a href="https://www.ebay.de/sch/gsconsulting/m.html" target="_blank">Weitere Auktionen</a></li>
    <li><a href="https://www.ebay.de/usr/gsconsulting" target="_blank">MichSeite</a></li>
</ul>
<div class="clear"></div>
</div>
</div>

<div class="auctionName"><h1>[nazwa_aukcji]</h1></div>
<div class="clear"></div>

<div id="auction">
<div class="container">

    <div class="Image"><img src="[obrazek]"></div>
    <div class="description">[opis]<br><br>[cena]€</div>

<div class="clear"></div>
</div>
</div>



</body>
</html>