How to fix my CSS to make a responsive layout? - css

Question

I designed the page with left side navigation, which on the full screen looks fine, however, when I resize it to mobile size, my main content stays in one column and does not fill up full viewport- leaving quite an empty space on the left.
I believe something in media queries might be causing this.
Here is a link: https://codepen.io/sweexee/pen/abvqyOY
Let me know if you can see it and CSS:
/* Typography imported from Google Fonts */
header {
font-family: "Taviraj", serif;
color: #257ecc;
}
p,
a {
font-family: Taviraj, serif;
}
/*Generic styles*/
html {
scroll-behavior: smooth;
}
html,
body {
min-width: 290px;
background-color: #ffffff;
line-height: 1.5;
}
body {
margin: 8px;
display: block;
}
a {
background-color: #257ecc;
text-decoration: none;
color: white;
text-align: center;
display: inline-block;
transition: all 0.3s;
}
a:hover {
opacity: 0.8;
color: #cc4d47;
}
p {
font-weight: 300;
font-size: 1.2rem;
}
blockquote {
border-left: 10px solid #257ecc;
margin: 1.5em 10px;
padding: 0.5em 10px;
}
blockquote:before {
color: #257ecc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
font-weight: 400;
font-style: italic;
font-size: 1.5rem;
color: #cc4d47;
}
ul {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
li {
display: list-item;
}
/* Navigation styles*/
nav {
display: block;
}
#navbar {
position: fixed;
min-width: 290px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
background-color: #257ecc;
border-right: solid;
border-color: #828e99;
}
#media only screen and (max-width: 815px) {
#navbar {
max-height: 275px;
border: none;
border-bottom: 2px solid;
position: absolute;
width: 100%;
z-index: 1;
top: 0;
padding: 0;
margin: 0;
}
}
nav > header {
color: #ffffff;
margin: 10px;
text-align: center;
font-size: 1.9rem;
font-weight: 600;
display: block;
}
#navbar ul {
padding: 0;
height: 80%;
overflow-y: auto;
overflow-x: hidden;
}
#media only screen and (max-width: 815px) {
#navbar ul {
border: 1px solid;
height: 207px;
}
}
#navbar ul > li {
color: #ffffff;
border-top: 1px solid;
border-color: #cc4d47;
list-style: none;
position: relative;
width: 100%;
}
#navbar a {
display: block;
padding: 12px 30px;
text-decoration: none;
cursor: pointer;
font-size: 1.1rem;
font-family: "Roboto", sans-serif;
font-weight: 300;
}
/*Main ccontent styles*/
main {
display: block;
}
#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}
#media only screen and (max-width: 400px) {
#main-doc {
margin-left: -10px;
}
}
#media only screen and (max-width: 815px) {
#main-doc {
position: relative;
margin-top: 270px;
}
}
/* Section styling*/
section {
display: block;
}
#main-doc header {
display: block;
font-size: 1.6rem;
font-weight: 600;
text-align: left;
margin: 0px;
padding-top: 10px;
}
section article {
color: #3d4247;
margin: 15px;
}
article {
display: block;
}
section article > p {
display: block;
}
section article > img {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
section article > ul {
list-style: none;
}
section article > ul li::before {
content: "\2022";
color: #257ecc;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
section article > ul > li {
font-family: "Taviraj", sans-serif;
font-size: 1.2rem;
font-weight: 300;
color: #3d4247;
}
section article > ul > li > a {
color: #257ecc;
background-color: #ffffff;
}

Answer 1

Add margin-left: 0; in the #main-doc in #media only screen and (max-width: 815px)
width media query as below
With margin-left reflection: 310px; # main-doc moves to the right even in the mobile width of the contents.
#media only screen and (max-width: 815px)
#main-doc {
position: relative;
margin-left: 0; /* *** add this *** */
margin-top: 270px;
}
After adding, your site will look like the following when the mobile width

Answer 2

Your #main-doc has margin-left: 310px;.
Remove this in your media query concerning (max-width: 815px) and you're good!