Mobile Responsive CSS - Not Centered on iPhone

Question

I'm trying to create a mobile responsive site. On the site on a laptop, it looks great and all cards/navbars etc are centered.

But on my phone everything is not centered. Everything starts more to the left. It looks centered at first and then if you scroll over to the right there is some of the background image still over there. The cards are shifted slightly to the right also - not centered.

But again this only happens on the phone. I was in Safari on my iphone.

Any suggestions?

My html has this in the header:

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

css:

body {

    background-image: url('../../static/capstone/island.jpeg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #FFFAFA;
    }

.navbar1 {

grid-auto-flow: column;
position: relative;
min-height: 100px;
margin-bottom: 80px;
opacity: 0.75;
padding-top: 1rem;
padding-bottom: 1rem;
box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
transition: 0.4s; 
}

.navbar {
  background-color: #FFFFFF;
  opacity: 0.75;
  margin-top: 120px;
  position: relative;

 -ms-flex-pack:justify;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
  transition: 0.4s; 
 }

.navbar > .container {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  -ms-flex-align: center;
  align-items: center;
 }


  .card {
  background-color: #FFFFFF;
  opacity: 0.75;
  justify-content: center;
  border-radius: 1em;
  padding: 1em;

  }

 .card {
  margin: 40px auto;
  border-radius: 20px;
  width: 400px;
  height: 200px;
  box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
  transition: 0.4s;
 }

  .nav_text {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  text-align: center;
  border-radius: 20px 20px 20px 20px;
  font-family: sans-serif;
  font-size: 20px;
  padding-left: 20%;
  padding-right: 20%;
  margin-top: 10px;
  height: 50px;
  }

 .card .card_title {
  text-align: center;
  border-radius: 0px 0px 10px 10px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 25px;
  margin-top: -30px;
  height: 40px;
 }

  .card_text {
  text-align: center;
  border-radius: 0px 0px 10px 10px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 20px;
  margin-top: 10px;
  height: 50px;
  flex-direction:column;
  flex-wrap: wrap;
  padding: 30px;
  }



 .title-black {
  color: black;
  text-align: center;
 }

 .container {
  text-align: center;
  padding-left: 50px;
  padding-right: 50px;
 }


.form-control {
background-color: #d3d3d3;
width: 83%;
margin:0 auto;
justify-content: center;
align-items: center;
text-align: center;
outline: transparent;
border: transparent;
padding: 7%;
display: flex;
border-radius: 15px;
margin: 0.25rem;
padding: 1.5rem;
font-size: 20px;
box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9),
-0.2rem -0.2rem 0.4rem #f0f2f5;
}


.submit {
border-radius: 12%;
color: Black;
box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9),
-0.2rem -0.2rem 0.4rem #f0f2f5;
width: 100px;
height: 25px;
cursor: pointer;
}





@media all and (max-width: 100%) {

.card-list {
flex-direction: column;
}
}

Answer 1

Thank you to everyone who helped - I figured out that I was using width in some cards and other items, and it was too large. So when I changed it to max-width: 345px; or anything smaller, everything started to fit much better and was easier to work with.

Answer 2

Try this one below instead of your current codes and replace it

body {

    background-image: url('../../static/capstone/island.jpeg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #FFFAFA;
    }

.navbar1 {

grid-auto-flow: column;
position: relative;
min-height: 100px;
margin-bottom: 80px;
opacity: 0.75;
padding-top: 1rem;
padding-bottom: 1rem;
-webkit-box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
        box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s; 
}

.navbar {
  background-color: #FFFFFF;
  opacity: 0.75;
  margin-top: 120px;
  position: relative;

 -ms-flex-pack:justify;
  padding-top: 1rem;
  padding-bottom: 1rem;
  -webkit-box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
          box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s; 
 }

.navbar > .container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
 }


  .card {
  background-color: #FFFFFF;
  opacity: 0.75;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 1em;
  padding: 1em;

  }

 .card {
  margin: 40px auto;
  border-radius: 20px;
  width: 400px;
  height: 200px;
  -webkit-box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
          box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
 }

  .nav_text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  text-align: center;
  border-radius: 20px 20px 20px 20px;
  font-family: sans-serif;
  font-size: 20px;
  padding-left: 20%;
  padding-right: 20%;
  margin-top: 10px;
  height: 50px;
  }

 .card .card_title {
  text-align: center;
  border-radius: 0px 0px 10px 10px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 25px;
  margin-top: -30px;
  height: 40px;
 }

  .card_text {
  text-align: center;
  border-radius: 0px 0px 10px 10px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 20px;
  margin-top: 10px;
  height: 50px;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 30px;
  }



 .title-black {
  color: black;
  text-align: center;
 }

 .container {
  text-align: center;
  padding-left: 50px;
  padding-right: 50px;
 }


.form-control {
background-color: #d3d3d3;
width: 83%;
margin:0 auto;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
text-align: center;
outline: transparent;
border: transparent;
padding: 7%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 15px;
margin: 0.25rem;
padding: 1.5rem;
font-size: 20px;
-webkit-box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9),
-0.2rem -0.2rem 0.4rem #f0f2f5;
        box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9),
-0.2rem -0.2rem 0.4rem #f0f2f5;
}


.submit {
border-radius: 12%;
color: Black;
-webkit-box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9),
-0.2rem -0.2rem 0.4rem #f0f2f5;
        box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9),
-0.2rem -0.2rem 0.4rem #f0f2f5;
width: 100px;
height: 25px;
cursor: pointer;
}





@media all and (max-width: 100%) {

.card-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
}
}

Answer 3

Try to add this bit of code

list-style-type: none;
margin: 0;
display: inline-block;
-webkit-padding-start: 0;

I posted it here because its to long to comment out