HTML margins squishing when viewed on Mobile device - html

Question

I tried to use a couple of posts that were here for resizing for mobile devices but i can't seem to get it working. The margins keep pushing all the elements together when you view the site on a mobile device
/* TEXT FORMATTING */
.introPar1 {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-left: 400px;
margin-right: 400px;
font-size: 30px;
}
.introPar1 h1 {
text-align: center;
}
.contacts {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-left: 400px;
margin-right: 400px;
font-size: 30px;
}
/* MOBILE FORMATTING */
#media (max-width: 1100px) {
introPar1 {
margin-right: 20px;
`enter code here`margin-left: 20px;
}
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}

Answer 1

You are seeing this page on mobile devices like this
You need to change like this
then increase the nav bar width
(I tried width: 1520px; for Nav beacuse that is the background image size you were used)

Answer 2

There are a bunch of problems with your code. But the problem with the menu is because li is not taking the height of a. So the list items will stack one under another, and will li under li. Li being smaller than a.
Use display:block on a.
Also, I copied the code from your site, so it will be here if someone else comes looking for this answer. Tried to clean it up a bit but you have some styles that i don't understand, like .introPar1 { margin-left:400px;margin-right:400px}
Anyway, see code below
body img {
max-width: 100%;
height: auto;
}
/* TOP NAVIGATION */
nav ul li a {
text-decoration: none;
margin: 20px;
padding: 20px;
border-style: solid;
border-color: grey;
display: block;
}
nav ul li {
float: left;
}
nav ul {
list-style-type: none;
float: left;
}
nav {
background-color: #f2f2f2;
padding: 10px;
float: left;
width: 100%;
box-sizing: border-box;
}
/* NAV HOVER */
nav a:hover {
background-color: blue;
border-color: orange;
border-style: solid;
color: white;
transition: .3s;
}
/* BANNER */
.banner {
text-align: center;
}
.banner img {
border-style: solid;
border-width: 10px;
border-color: #87CEEB;
}
/* BODY ELEMENTS */
.home {
font-weight: bold;
font-size: 20px;
}
.temp {
text-align: center;
margin: auto;
padding: 20px;
}
/* BACKGROUND */
.bgimage img {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
position: fixed;
}
/* TEXT FORMATTING */
.introPar1 {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
font-size: 30px;
}
.introPar1 h1 {
text-align: center;
}
.contacts {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
font-size: 30px;
}
/* MOBILE FORMATTING */
#media (max-width: 1100px) {
introPar1 {
margin-right: 20px;
margin-left: 20px;
}
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
nav ul li a {
margin: 5px;
padding: 10px;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
nav ul li {
width: 100%;
}
}
<div class="bgimage">
<img src="http://via.placeholder.com/1200x1000">
</div>
<nav>
<ul>
<li class="home">Crafts LLC</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="banner"><img src="http://via.placeholder.com/350x150"></div>
<div class="Intro">
<article class="introPar1">
<h1><b><u>CRAFTS LLC</u></b></h1>
<br> Here at CRAFTS LLC, we offer you our 45 years of expertise of
<br> home repair advisory and remodeling services
<br>
<br> We are also here to help you with your estimation service needs
<br> and contractor referral services
<br>
<br> With CRAFTS LLC, you get both service and quality excellence.
<br> You need to look no further for your home repair and remodeling needs/solutions
<br>
</article>
</div>
<div class="contacts">
<p>Email to: craftsllc1#gmail.com or Call:813 347 7458</p>
</div>