I am trying to create a category selection section that includes 6 options.

我正在尝试创建一个类别选择部分，其中包括6个选项。

This product selection section should be more to the left, but there is no way to move everything together

这个产品选择部分应该更靠左，但没有办法将所有东西都移到一起

Maybe there are some suggestions on how to achieve this better with changes

也许有一些关于如何通过改变更好地实现这一点的建议

<!---Search-->
<section id="search" class="my-5 py-5 ms-2">
  <div class="container mt-5 py-5">
  <p>Search Porducts</p>
  <hr>
  </div>

  <form action="shop.php" method="POST">
    <div class="row mx-auto container">
      <div class="col-lg-12 col-md-12 col-sm-12">


      <p>Category</p>
        <div class="form-check">
        <input class="form-check-input" value="clothes" type="radio" name="category" id="category_one" <?php if (isset($category) && $category == 'clothes') {echo 'checked';}?>>
           <label class="form-check-label" for="category_one">
          Clothes
        </label>
      </div>

      <div class="form-check">
        <input class="form-check-input" value="sunglasses" type="radio" name="category" id="category_two" <?php if (isset($category) && $category == 'sunglasses') {echo 'checked';}?>>
            <label class="form-check-label" for="category_two">
          Sunglasses
        </label>
      </div>

      <div class="form-check">
         <input class="form-check-input" value="shoes" type="radio" name="category" id="category_three" <?php if (isset($category) && $category == 'shoes') {echo 'checked';}?>>
            <label class="form-check-label" for="category_two">
          Shoes
        </label>
      </div>

      <div class="form-check">
         <input class="form-check-input" value="jackets" type="radio" name="category" id="category_four" <?php if (isset($category) && $category == 'jackets') {echo 'checked';}?>>
            <label class="form-check-label" for="category_two">
          Jackets
        </label>
      </div>

      <div class="form-check">
         <input class="form-check-input" value="watches" type="radio" name="category" id="category_four" <?php if (isset($category) && $category == 'watches') {echo 'checked';}?>>
            <label class="form-check-label" for="category_two">
          Watches
        </label>
      </div>

      <div class="form-check">
            <input class="form-check-input" value="bags" type="radio" name="category" id="category_five" <?php if (isset($category) && $category == 'bags') {echo 'checked';}?>>
            <label class="form-check-label" for="category_five">
          Bags
        </label>
      </div>


      </div>
    </div>


    <div class="row mx-auto container mt-5">
      <div class="col-lg-12 col-md-12 col-sm-12">

        <p>Price</p>
        <input type="range" class="form-range w-50" name="price" value="1000" min="1" max="1000" id="customRange2">
        <div class="w-50">
          <span style="float:left;">1</span>
          <span style="float:right;">1000</span>
        </div>
      </div>
    </div>

    <div class="form-group my-3 mx-3">
      <input type="submit" name="search" value="Search" class="btn btn-primary">
    </div>

  </form>
</section>

For information on what it should look like and how I got it

关于它应该是什么样子以及我是如何得到它的信息

It should look like this

它应该是这样的

and it looks like this to me

在我看来是这样的

I tried to change the code by applying css with styles but nothing changed as it should

我试图通过应用带有样式的CSS来更改代码，但没有进行应有的更改

The Bootstrap classes you're using might be adding some extra margin or padding to your elements.

您正在使用的Bootstrap类可能会为您的元素添加一些额外的边距或填充。

Here's a suggestion to align your elements:

这里有一个建议来调整你的元素：

1. Remove the container class from the row divs. The container class in Bootstrap adds some automatic margins and padding which might be causing your elements to not align properly.

   
   



2. Add a custom CSS class to your form and define the desired margin in that class.

   
   

Here's how you can modify your code:

以下是修改代码的方法：

<!---Search-->
<section id="search" class="my-5 py-5 ms-2">
  <div class="container mt-5 py-5">
  <p>Search Porducts</p>
  <hr>
  </div>

  <form action="shop.php" method="POST" class="my-form">
    <div class="row mx-auto">
      <div class="col-lg-12 col-md-12 col-sm-12">
      <!-- Your form elements here -->
      </div>
    </div>

    <!-- Rest of your form -->

  </form>
</section>

And in your CSS file:

在您的css文件中：

.my-form {
  margin-left: 0; /* Adjust this value as needed */
}

Remember to replace 0 with the desired margin value. This should help align your form elements with the search button.

记住用所需的边距值替换0。这应该有助于将您的表单元素与搜索按钮对齐。

If this doesn't solve your problem, please provide more details about your layout and CSS styles.

如果这不能解决您的问题，请提供有关您的布局和css样式的更多详细信息。