better responsive handling

Signed-off-by: Arthur Lu <learthurgo@gmail.com>

index.html

@@ -31,25 +31,24 @@
 			}
 			@media screen and (max-width: 1000px) {
 				#instance-container {
-					display: flex;
-					flex-direction: column;
+					display: grid; 
+					grid-template-columns: auto auto 1fr auto;
+					column-gap: 2.5em;
+					align-items: center;
+				}
+				#instance-container {
+					margin: 0px;
 				}
 				#instance-container-header * {
 					display: none;
 				}
 				instance-obj {
-					display: grid;
-					grid-template-columns: auto auto auto 1fr;
-					gap: 20px;
-					padding-top: 20px;
-					padding-bottom: 20px;
+					display: contents;
+				}
+				instance-obj:after, instance-obj:first-of-type:before {
+					content: " ";
 					border-bottom: 1px solid var(--content-txt-color);
-				}
-				instance-obj:first-of-type {
-					border-top: 1px solid var(--content-txt-color);
-				}
-				.btn-group {
-					grid-column: 3 / span 2;
+					grid-column: 1 / span 8;
 				}
 			}
 		</style>