CODEWITHSUNDEEP
htmlcss
hannacreed
hannacreed

Reputation: 649

Cannot center align my column

I am new to coding and am making a test website, but I have encountered many problems, one of which is centering my columns. One column stays centered as I change the browser size, but the other just keeps to the left. I am not sure what I have done wrong because the code seems to be the same as the code for the right column, please help.

I have tried many different things: margin 0 auto, margin with percentages, padding, and many others but nothing changed.

Only been learning code for about a week and a half... bear with me...

responsive.css: 

@media screen and (min-width: 800px) {

/***************************
HOME
***************************/

#homecol1 {
float: left;
width: 50%;
max-width: 500px;
max-height: 600px;
}

#homecol2 {
float: right;
width: 50%;
margin-bottom: 15.5%;
}

index.html: 

<div id="homecol1">
<section class="para">
    <h4 class="homeinfo">Home</h4>
    <p class="homeinfo">my paragraph</p>
</section>
</div>
<div id="homecol2">
    <div id="treelogo">
    <section>
    <center><img class="treehome" src="img/section-logo.png" 
    alt="tree-logo" height="350" width="350"></center>
    </section>
    </div>
</div>

index.css:

#treelogo {
transform: scale(0.3);
margin-right: 40px;
padding: 0;
text-align: left;
}

.para {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: #bbb;
text-align: center;
margin-top: 100px;
padding: 0 30px 0 30px;
font-size: 15px;
}

I wish that I could add more than two images...

my index.html

responsive.css

Upvotes: 0

Views: 196

Answers (2)

jimmy winstone
jimmy winstone

Reputation: 88

It seems any of your colums aren't centered at lower resolution, they've got full width. Image is limited by height property and centered by tag. To center divs limit them and center with margin e.g. 

@media screen and (max-width: 800px) {
#homecol1, #homecol2 {
  width: 80%;
  margin: 0 auto;
}
}

Upvotes: 0

Sergey
Sergey

Reputation: 7692

You are using the <center>. And it is used once. However it's a bad tag for today, you have to use some class for imgs you wanna align at center, then you should specify display: block; margin: auto; because margin doesn't work for inline elements that img is.

Upvotes: 1

Related Questions