How to make border responsive? - css

Question

I finally got my first webpage finished, and got it to look good on both desktop and mobile. But on medium-screens like tablets, it does not look quite right.
I've tried fiddling with the #Media Queries, men I dont quite get it.
The border does not fill the part of the screen I want. What am I missing here?
Thanks!
Code:
https://codepen.io/Ludvigx86/pen/bGjpBmK
body {
background-image: url(/Images/polkabkg.png);
background-size: cover;
border: 2ew solid aliceblue;
font-family: Geneva, Tahoma, sans-serif;
letter-spacing: 5px;
margin: 60px 250px 100px 250px;
}
.navbar {
display: flex;
justify-content: center;
list-style-type: none;
margin: 10px;
}
.navbar a {
color: aliceblue;
display: flex;
font-size: larger;
padding: 15px;
text-decoration: none;
}
.navbar a:hover {
color: rgb(200, 0, 150);
transition: 0.3s;
}
.house img {
width: 30px;
}
.house {
margin-left: 211px;
margin-top: 44px;
position: absolute;
}
.bord img {
display: block;
margin-left: auto;
margin-right: auto;
padding-bottom: 30px;
padding-top: 50px;
width: 70%;
}
.hvem p {
font-size: large;
line-height: 40px;
text-align: center;
}
.container ul {
color: aliceblue;
display: flex;
list-style: none;
text-align: center;
}
li {
padding: 30px;
}
ul .kontakt a {
color: gold;
}
.logo {
display: flex;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
width: 50vh;
}
.band {
display: flex;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
width: 80%;
}
.mail {
display: none;
justify-content: center;
border: solid 1px gold;
border-width: 2px;
border-radius: 10px;
padding: 10px;
margin-left: 40px;
margin-right: 40px;
}
.mail a {
text-decoration: none;
color: gold;
}
h3 {
color: aliceblue;
text-align: center;
}
.private {
border: dotted;
border-color: aliceblue;
margin-left: 250px;
margin-right: 250px;
margin-top: 100px;
}
h2 {
color: aliceblue;
font-style: italic;
margin: 50px;
text-align: center;
}
.konsert p {
color: #f0f8ff;
margin: 300px;
text-align: center;
}
.sitat p {
padding-right: 175px;
text-align: right;
}
p {
text-align: center;
color: #f0f8ff;
}
hr {
border-width: 2px;
}
footer {
padding: 0px;
color: #f0f8ff;
}
.container {
display: flex;
justify-content: center;
padding-bottom: 0px;
}
footer img {
display: flex;
justify-content: center;
padding: 15px;
width: 30px;
}
.header {
text-align: center;
}
.burger {
position: absolute;
top: 0.75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.burger .bar {
height: 3px;
width: 100%;
background-color: aliceblue;
border-radius: 10px;
}
/* MEDIA QUERIES */
#media screen and (max-width: 768px) {
body {
background-image: url(/Images/polkabkg.png);
background-size: cover;
font-family: Geneva, Tahoma, sans-serif;
letter-spacing: 5px;
}
.house {
position: absolute;
margin: 0px;
}
.house {
position: absolute;
margin-top: 28px;
margin-left: 18px;
}
.house img {
width: 15px;
}
.navbar {
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 5px;
}
.navbar a {
color: aliceblue;
display: flex;
font-size: smaller;
text-decoration: none;
}
.kontakt {
display: none;
}
ul .navbar {
padding: 0px;
}
li {
padding: 10px;
margin-bottom: 15px;
}
.logo {
width: 180px;
margin-top: 10px;
}
body > div:nth-child(3) > h2 {
margin: 0px;
font-size: small;
}
.sitat p {
padding-right: 15px;
text-align: right;
}
body {
border: 0px;
margin: 0px;
}
.navbar {
display: flex;
}
.mail {
display: flex;
justify-content: center;
border: solid 1px gold;
border-width: 2px;
border-radius: 10px;
padding: 10px;
margin-left: 40px;
margin-right: 40px;
}
.bord img {
width: 400px;
margin-top: 0px;
}
.hvem p {
font-size: smaller;
margin-left: 15px;
}
.container ul {
color: aliceblue;
display: block;
}
.private {
display: flex;
border: dotted;
border-color: aliceblue;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.konsert p {
display: flex;
margin: 80px;
}
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
body {
background-image: url(/Images/polkabkg.png);
background-size: cover;
border: 2px solid aliceblue;
font-family: Geneva, Tahoma, sans-serif;
letter-spacing: 5px;
margin: 60px 250px 100px 250px;
}
.house {
position: absolute;
margin: 0px;
}
.house {
position: absolute;
margin-top: 28px;
margin-left: 18px;
}
.house img {
width: 15px;
}
.navbar {
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 5px;
}
.navbar a {
color: aliceblue;
display: flex;
font-size: smaller;
text-decoration: none;
}
.kontakt {
display: none;
}
ul .navbar {
padding: 0px;
}
li {
padding: 10px;
margin-bottom: 15px;
}
.logo {
width: 180px;
margin-top: 10px;
}
body > div:nth-child(3) > h2 {
margin: 0px;
font-size: small;
}
.sitat p {
padding-right: 15px;
text-align: right;
}
body {
border: 0px;
margin: 0px;
}
.navbar {
display: flex;
}
.mail {
display: flex;
justify-content: center;
border: solid 1px gold;
border-width: 2px;
border-radius: 10px;
padding: 10px;
margin-left: 40px;
margin-right: 40px;
}
.bord img {
width: 400px;
margin-top: 0px;
}
.hvem p {
font-size: smaller;
margin-left: 15px;
}
.container ul {
color: aliceblue;
display: block;
}
.private {
display: flex;
border: dotted;
border-color: aliceblue;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.konsert p {
display: flex;
margin: 80px;
}
}
I've tried fiddling with the #Media Queries, men I dont quite get it.
The border should surround both the content and the navbar.