One Section of my Page Has Even Margins and Another Doesn't

HTML-CSS
1

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

Big%20Margin%20Gap%20and%20Small%20Margin%20Gap
Big%20Margin%20Gap%20and%20Small%20Margin%20Gap1618×716 209 KB

Big%20margin%20gap
Big%20margin%20gap1534×612 150 KB

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;
  }
}
2

Wow, that’s a lot of CSS code. Could you post a link to your codepen so we could possibly play with it to see how various rules are affecting it?

To be honest, the best way to solve issues like this is to comment out the relevant problem sections and then slowly uncomment, observing how the code is affecting layout.

5

Hi @camperextraordinaire, in regards to the absolute positioning stuff…I needed it to create those 2 particular style boxes I created…entitled “Videos” and “Skills”…it would be hard for me to do away with that :tired_face:

6

Haha, no I was just trying to center some invisible interior divs inside the boxes entitled “Videos” and “Skills”.:grin: