Html 无法将我的列居中对齐

我对编码还不熟悉，正在制作一个测试网站，但我遇到了很多问题，其中之一就是我的专栏的中心问题。更改浏览器大小时，一列保持居中，而另一列保持在左侧。我不确定我做错了什么，因为代码似乎与正确列的代码相同，请帮助

我尝试过很多不同的方法：自动边距0、百分比边距、填充边距和许多其他方法，但都没有改变

只学了一周半的代码。。。请容忍我

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

<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.html:

@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%;
}

<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>

我希望我可以添加两个以上的图像

---

您正在使用

。而且只使用一次。然而，对于今天来说，这是一个糟糕的标记，您必须为要在中心对齐的IMG使用一些类，然后您应该指定

display:block；保证金：自动因为
margin
不适用于img所属的内联元素。
似乎您的任何列都没有以较低的分辨率居中，它们具有全宽。图像受高度属性限制，并以标记为中心。
要使div居中，请限制它们并用边距居中，例如

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

请以文本而不是图像的形式发布代码。您有检查浏览器大小的媒体查询。你应该检查一下。中心线在哪里？我找到了唯一的左边/右边。您可以编辑您的问题并添加
代码段
。这对我不起作用，它使项目垂直堆叠居中，我正在尝试制作两列，并使文本在列中居中。要使文本在div中居中，应使用text align属性