diff --git a/styles/custom.css b/styles/custom.css
index 8ad683b..f8ad383 100644
--- a/styles/custom.css
+++ b/styles/custom.css
@@ -16,11 +16,21 @@ blue: #6ea2c9;
margin: 0;
}
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
/* nav */
nav {
background-color: #80bd01;
}
+nav ul {
+ padding: 0;
+}
+
nav ul li {
color: white;
display: inline-block;
@@ -42,7 +52,6 @@ nav a {
text-decoration: none;
display: block;
padding: 1.4em .7em;
- height: 1.5em;
position: relative;
}
@@ -61,9 +70,9 @@ nav .active a::after {
/* sections */
.container {
- width: 80%;
max-width: 1100px;
margin: 0 auto;
+ padding: 0 .7em;
}
.container--narrow {
@@ -105,7 +114,7 @@ nav .active a::after {
}
img {
- width: 100%;
+ max-width: 100%;
}
.col-4 img {
@@ -113,23 +122,28 @@ img {
}
/* grid */
-.row {
- display: table;
- table-layout: fixed;
- margin: 0 -.7em;
-}
-.col {
- display: table-cell;
- width: 1%;
- padding: .7em;
- vertical-align: top;
-}
+@media (min-width: 48em) {
+
+ .row {
+ display: table;
+ table-layout: fixed;
+ margin: 0 -.7em;
+ }
+
+ .col {
+ display: table-cell;
+ width: 1%;
+ padding: .7em;
+ vertical-align: top;
+ }
+
+ .col-4 {
+ display: table-cell;
+ padding: .7em;
+ width: 25%;
+ }
-.col-4 {
- display: table-cell;
- padding: .7em;
- width: 25%;
}
address {