Hi folks!
I’m having a persistent problem of one section of my page having a big gap on the right side and a small gap on the left side. However, another section of my page, above it, has the exact same bootstrap set-up and both sides of the page have even margins. I can’t figure out why this is? Thanks in advance for your help!
My CodePen link is: https://codepen.io/IDCoder/full/LrQRrw/
I have attached two screenshots below so you can see the issue
CSS code here:
.container {
margin-top: 20px;
margin-bottom: 20px;
/**border: 1px solid #000000;**/
height: 100%;
width: auto;
}
.About-Me {
background-color: #0099ff;
border-radius: 20px;
box-shadow: inset 0px 5px 20px 0px #000;
width: auto;
position: relative;
}
.glass{
width: 100%;
height: 50%;
/*background-color: rgb(255,255,255,0.2);*/
background: rgba(113,206,239,0.41);
background: -webkit-linear-gradient(top, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);
background: -o-linear-gradient(top, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);
background: -ms-linear-gradient(top, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);
background: linear-gradient(to bottom, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71ceef', endColorstr='#b7deed', GradientType=0 );
/* for the following elements, rgba(183,222,237,0.41) 78%, 78% was changed to 100% */
position: absolute;
top: 0;
/*border-radius: 20px;*/
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
div h3{
/*border: 1px solid black;*/
margin-top: 25px;
}
h1 {
color: #ffffff
}
h2{
color: #ffffff;
}
h4 {
color: #ffffff
}
#top{
padding-top: 8px;
margin-left: 10px;
float: left;
}
#bottom{
float: right;
margin-right: 10px;
padding-top: 8px;
}
.img-responsive{
border-radius: 25px;
}
#top{
margin-top: 10px;
}
#bottom{
margin-bottom: 10px;
}
/*.col-md-4{
border: 1px solid black;
}
*/
.dropbtn {
background-color: #4CAF50;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border: 1px dashed black;
}
.dropdown-content a:hover {background-color: #00ffff}
.dropdown:hover .dropdown-content {
display: block;
background-color: #f1f1f1;
}
/*.dropdown:hover .dropbtn {
background-color:
}*/
.dropdown {
position: relative;
display: inline-block;
}
.myButton {
width: 250px;
height: 40px;
line-height: 1.75em;
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
background-color:#79bbff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #84bbf3;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
box-shadow: 7px 7px 15px black;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
background-color:#378de5;
}
.myButton:active {
position:relative;
top:1px;
}
#tell-state{
position: relative;
border: 1px solid black;
}
.green{
position: absolute;
left: 35px;
top: 15px;
height: 10px;
width: 10px;
background-color: green;
border-radius: 50%
}
.glow-green{
background-color: #0cff00;
box-shadow: -1px 0px 15px 7px #0cff00;
}
.red{
position: absolute;
left: 160px;
top: 15px;
height: 10px;
width: 10px;
background-color: #aa0101;
border-radius: 50%
}
.glow-red{
background-color: #ff3200;
box-shadow: -1px 0px 15px 7px #ff3200;
}
.background-image {
/*border: 1px solid black;*/
background: url(https://s25.postimg.cc/feof9a75b/sputnik_660x440.jpg);
background-repeat: no-repeat;
Height: 440px;
background-size: contain;
background-position: center;
}
.About-Me {
margin-bottom: 10px;
}
#buttons{
/*border: 1px solid black;*/
}
.col-xs-4 {
margin-top: 20px;
}
.background-image {
margin-top: 10px;
margin-bottom: 10px;
}
.col-xs-4 {
margin-left: auto;
margin-right: auto;
}
.holder {
max-width: 500px;
overflow: hidden;
position: relative;
height: 300px;
margin: auto;
}
div.Portfolio.Pics {
width: 3000px;
position: absolute;
overflow: hidden;
}
figure {
width:500px;
float:none;
overflow:hidden;
}
.Portfolio.Pics figure{
overflow: hidden;
height: 500px;
}
.Portfolio.Pics figure img{
width: 100%
float: left;
opacity: 0.65;
margin-top: 10px;
}
figure{
position: relative;
width: 100%;
margin: 0;
left: 0;
animation: 20s portfolio infinite;
cursor: pointer;
}
@keyframes portfolio {
0%{
left: -100%;
}
25%{
left:-50%;
}
50%{
left:-75%;
}
100%{
right:100%;
}
}
figure:hover {
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
.contact-holder{
margin-top: 20px;
margin-bottom: 20px;
height: auto;
}
#contact-form {
background-color: white;
text-align: center;
position: relative;
height: auto;
}
* {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* Contact Form Styles */
h1 {
margin: 10px 0 0 0;
}
h4{
margin: 0 0 20px 0;
}
#contact-form {
background-color:#0099ff;
padding: 10px 20px 30px 20px;
width:500px;
position: relative;
border-radius:20px;
color: hsl(210, 100%, 40%);
text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
}
#contact-form input,
#contact-form select,
#contact-form textarea,
#contact-form label {
font-size: 15px;
margin-bottom: 2px;
font-family: Arial, san-serif;
}
#contact-form input,
#contact-form select,
#contact-form textarea {
width:100%;
background: #fff;
border: 0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: 25px;
padding: 5px;
}
#contact-form textarea {
width:100%;
height: 150px;
}
#contact-form button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:#e17f3f;
margin:0 0 5px;
padding:10px;
border-radius:5px;
}
#contact-form button[type="submit"]:hover {
background-color:#79bbff ;
color: #e17f3f;
font-size: 1.5em;
}
#contact-form button[type="submit"]:active {
box-shadow:inset 0 1px 3px rgba(0,0,0,1);
color: #e17f3f;
}
input:required, textarea:required {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
}
#contact-form .required {
font-weight:bold;
color: #E5E6E7;
}
/* Hide success/failure message
(especially since the php is missing) */
#failure, #success {
color: #6EA070;
display:none;
}
div h2{
font-family: digital-7, sans-serif;
font-size: 3em;
/*border: 3px solid red;*/
}
.social-media-icon-footer{
width:500px;
background-color:white;
color: #0099ff;
height:80px;
border: 1px solid black;
border-radius: 15px;
text-align: center;
box-shadow:
inset hsla(210,100%,100%,.7) 0 2px 1px 7px, /* top HL */
hsla(210,100%,75%, .8) 0 0px 3px 2px, /* outer SD */
hsla(210,50%,40%, .35) 0 -5px 6px 4px, /* outer SD */
hsla(210,80%,95%, 1) 0 5px 6px 4px; /* outer HL (blue LED ) */
}
.link-button-holder > a {
display: inline-table;
cursor: pointer;
text-decoration: none;
height: 100%;
width:100%;
}
.link-button-holder > a > h1 {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
color: #f7f8f8;
font-size: 12px;
font-family: cabinregular;
text-align: center;
}
div.contact {
padding: 0px;
margin-top:-20px;
/**background-color: black;**/
}
ul.soc {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
text-align: center;
width: 100%;
}
ul.soc li {
display: inline-block;
}
li.socbutton a {
background-color: #0099ff;
border: 1px solid white;
border-radius: 10px;
color: white;
text-decoration: none;
text-shadow: 2px 2px black;
font-size: 12px;
margin: 5px;
padding: 5px;
box-shadow: 7px 7px 5px black;
width: 300px;
}
body {
color: #C0C0C0;
font-family: Arial, san-serif;
}
/* Make form look nice on smaller screens */
@media(min-width: 500px) {
.myButton {
margin-bottom: 15px;
width: 100%;
}
}
@media(min-width: 615px) {
.myButton {
width: 100px;
}
}
@media(max-width: 615px) {
.myButton {
width: 100px;
}
}
@media only screen and (min-width:800px) {
.myButton{
width: 200px;
}
}
@media only screen and (max-width: 900px){
.myButton{
width: 200px;
}
}
@media only screen and (max-width: 500px) { /* anything less than 500px (or *501px and up will be regular) */
div h2{
font-size: 2em;
}
#buttons{
margin-top: 50px;
}
.myButton
.dropbtn{
width: 100%;
}
#portfolio{
/*border: 1px solid black;*/
}
#contact-form{
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
.myButton {
margin-bottom: 15px;
}
.social-media-icon-footer{
width:100%;
height: 100%;
}
ul.soc li {
width: 100%;
}
.socbutton{
/*border: 1px solid black;*/
margin: 7px;
}
#top,
#bottom
{
width: 250px;
}
}