Skip to main content
AI Assist is now on Stack Overflow. Start a chat to get instant answers from across the network. Sign up to save and share your chats.

Return to Question

corrected posts body
Source Link
Igor Ivancha
Igor Ivancha
  • 3.5k
  • 4
  • 32
  • 39

I am tinkering with a basic site I plan to host my blog on in the future and I cannot manage to get one of my div elements to align with the rest of the site properly. I have linked to the project on CodePen below. I cannot seem to eliminate the white space between .header.header and .main.main. I had thought simply making the display inline-blockdisplay: inline-block and keeping the margin/padding/bordermargin/padding/border small would do the trick but I am obviously mistaken. Thoughts?

http://codepen.io/Kpmfastball/pen/xOvBNB

Below is the CSS for .main.main, the div class I am struggling with, and .heading.heading, which is the div located right above it on the webpage.

 .main {  display: inline-block;  height: 800px;  width: 82%;  margin: 1px;  padding: 1px;  border-width: 1px;  font-family: times;  background-color: #29BA91;

}

 } .heading {  display: block;  font-family: times;  width: auto;  height: 150px;  border-width: 1px;  border-color: black;  margin: 1px;  padding: 1px;  background-color: #0F8CB2;  color: #ffffff; }

}

I am tinkering with a basic site I plan to host my blog on in the future and I cannot manage to get one of my div elements to align with the rest of the site properly. I have linked to the project on CodePen below. I cannot seem to eliminate the white space between .header and .main. I had thought simply making the display inline-block and keeping the margin/padding/border small would do the trick but I am obviously mistaken. Thoughts?

http://codepen.io/Kpmfastball/pen/xOvBNB

Below is the CSS for .main, the div class I am struggling with, and .heading, which is the div located right above it on the webpage.

 .main { display: inline-block; height: 800px; width: 82%; margin: 1px; padding: 1px; border-width: 1px; font-family: times; background-color: #29BA91;

}

 .heading { display: block; font-family: times; width: auto; height: 150px; border-width: 1px; border-color: black; margin: 1px; padding:1px; background-color: #0F8CB2; color: #ffffff;

}

I am tinkering with a basic site I plan to host my blog on in the future and I cannot manage to get one of my div elements to align with the rest of the site properly. I have linked to the project on CodePen below. I cannot seem to eliminate the white space between .header and .main. I had thought simply making the display: inline-block and keeping the margin/padding/border small would do the trick but I am obviously mistaken. Thoughts?

http://codepen.io/Kpmfastball/pen/xOvBNB

Below is the CSS for .main, the div class I am struggling with, and .heading, which is the div located right above it on the webpage.

.main {  display: inline-block;  height: 800px;  width: 82%;  margin: 1px;  padding: 1px;  border-width: 1px;  font-family: times;  background-color: #29BA91; } .heading {  display: block;  font-family: times;  width: auto;  height: 150px;  border-width: 1px;  border-color: black;  margin: 1px;  padding: 1px;  background-color: #0F8CB2;  color: #ffffff; }
Source Link
Kpmfastball
Kpmfastball
  • 3
  • 2

Properly aligning div elements in a basic html/css site

I am tinkering with a basic site I plan to host my blog on in the future and I cannot manage to get one of my div elements to align with the rest of the site properly. I have linked to the project on CodePen below. I cannot seem to eliminate the white space between .header and .main. I had thought simply making the display inline-block and keeping the margin/padding/border small would do the trick but I am obviously mistaken. Thoughts?

http://codepen.io/Kpmfastball/pen/xOvBNB

Below is the CSS for .main, the div class I am struggling with, and .heading, which is the div located right above it on the webpage.

 .main { display: inline-block; height: 800px; width: 82%; margin: 1px; padding: 1px; border-width: 1px; font-family: times; background-color: #29BA91;

}

 .heading { display: block; font-family: times; width: auto; height: 150px; border-width: 1px; border-color: black; margin: 1px; padding:1px; background-color: #0F8CB2; color: #ffffff;

}